项目小结

  1. logo ps智能对象转化svg格式，放大还是会糊；切图切的大一点，在高分辨率屏下大小相应调整
  2. ps支持自动切图，基于图层，后缀修改png、jpg等，修改配置还可以支持svg，@2x两倍放大，还有css样式，ps cc果然很强大。
  3. 禅意花园，盒子模型左右用百分比，上下单位用em，不过现在rem出来了，结合了em和px的优点，ie10+，ff，chrome都支持。
  4. flex布局，设置.pic  left、.text right有时会导致高度不一致，.pic{overflow:hidden} .text{overflow:hidden}
  5. 切图jpg 高质量在1920*1050上有点模糊，80%质量就和png相差无几，而且大小小很多。
  6. 笔记本模拟分辨率有点误差，在大屏上不会失真。主流屏幕大小：1024*768,1366*768,1920*1080等，手机屏幕：ip4 320*480，ip5 320*568等，chrome模拟器还是比较准的。
  7. 浏览器加载顺序：
    1. 　　index.html，
    2. fullPage.css，index.css
    3. recruit.png,jquery.min.js
    4. p1_pic1.png
    5. jquery.fullPage.js,anim.js
    6. p3_pic1.png
    7. 背景图片
    • <header> alert  ——>html、css加载完成
    • <body> 开头 alert ——> img、js pending
    • <body> 中间 alert ——> img、js loading ,背景图pending
    • <body> 最后 alert ——> 图片不一定加载完成，如果在网速比较慢、图片较大的情况下，所以在页面添加alert并不能准确的实现进度。
    • $(function () {alert}) 在<body> 最后alert后面，每个alert会阻塞 图片下载。
  8. grunt css_sprite版本太多，而且需要python安装环境，在网上找了gm和planform.js下过来并没什么卵用。转投http://www.cn.spritegen.website-performance.org/。不能在一颗树上吊死。
  9. 微信内核MQQBrowser/5.4表现和ie9很相近，低版本的chrome31.2也好像不支持flex布局。提示升级。
  10. IE11 不识别ie条件注释无效
posted @ 2015-09-16 18:29  xjinza  阅读(161)  评论(0)  编辑  收藏  举报