Day05-flexible.js

今天是来到新公司的第五天，开始看手中的项目，作的东西是相似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flexible.js。（ps：感受是什么鬼，不晓得是干吗的。做为一个工做快一年的半的前端小白，除了作过响应式页面，还没作过真正的移动H5页面，表示很焦灼2333333。）ok，废话很少说，let's get into the business。

好比今天接到一个ui妹子的一张设计图，对于手机尺寸的各类规范我也不是很清楚。通常据我所知，宽通常是750px的。如何进行切片以及编写css呢？具体详情能够访问（http://www.jb51.net/article/7...，如下内容由此处转载）。iphone6宽是375pt，因为retina屏，因此切片和平时web端切片不太同样。

解决retina屏问题的可行方案是（以750px*1334px的设计稿为例）：

1）在devicePixelRatio<=2时，图片统一使用750设计稿的切图

2）在devicePixelRatio>=2时，图片统一使用750*1.5=1125，也就是所谓@3x设计稿的切图。

把美工按照750*1334的设计稿下的切图都放在img/@2x 这个文件夹下。

而后让美工把750的设计稿矢量放大1.5倍，再按照一样的切图要求提供@3x的切图，并放在了img/@3x 这个文件夹下：

使用了这个js以后，就不要写

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

交给flexible.js自动处理。

---

编写CSS的基本要求：

1）除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；

2）标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；（因此淘宝这个方案是能够在任意设计稿尺寸下使用的）

3）若是须要设置font-size，可跟据html的data-dpr属性来处理，相似下面的写法：

[data-dpr="2"] p {   font-size: 16px; }  

[data-dpr="3"] p {   font-size: 24px; }