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; }