移动web学习--淘宝 flexible.js

最近在学习移动web，需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料，最终选择了使用淘宝的flexible.js来实现各个终端的适配。
很好的博文：
    1、从网易与淘宝的font-size思考前端设计稿与工作流
    2、白色橡树：移动web资源整理
    3、移动端web app自适应布局探索与总结
    4、手机端页面自适应解决方案—rem布局
    5、使用Flexible实现手淘H5页面的终端适配

学习总结如下：
一、相关概念
物理像素：显示器上最小的物理显示单元
设备独立像素：也叫密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表可以由程序使用的虚拟像素。
**设备像素比：**device pixel ratio 定义了物理像素和设备独立像素之间的对应关系

dpr=物理像素/设备独立像素
例如：iphone6
（1）设备宽高为 375×667 –>设备独立像素
（2）dpr = 2 –>物理像素=750×1134
二、多屏适配基于rem的原理：
针对不同的手机屏幕尺寸和dpr动态的改变根节点的font-size大小。
rem = document.documentElement.clientWidth*dpr /10;
/10 是为了方便按照设计稿转换
三、flexible.js的使用
github地址
**基本思路：
选择一种尺寸作为设计和开发基准，定义一套适配规则，自动匹配剩下的尺寸，特殊适配效果给出设计效果。**

1、在页面载入 flexible.js
2、设置自己的font-size，我的设计稿是640×1136，所以我的font-size设置为64px。在这里还有一个插件，是淘宝团队做的，可以直接帮助你将设计稿的px转换成rem。
github地址，页面上有详细的使用和安装方法。
基于这个插件，就可以按照设计稿，将px转化成rem了
3、font-size的设置，不要使用rem，而是要根据dpr设置为px。

[data-dpr="2"] h4{
    font-size: 36px;
}
[data-dpr="2"] .right {
    font-size: 24px;
}
[data-dpr="2"] input {
    font-size: 24px;
}//dpr为2时字体的大小
[data-dpr="3"] h4{
    font-size: 66px;
}
[data-dpr="3"] .right {
    font-size: 44px;
}
[data-dpr="3"] input {
    font-size: 44px;
}//dpr为3时的字体大小

4、存在问题：
1） background-image 问题：
因为dpr不一样，所以不同的dpr下肯定不能使用一样尺寸的图片，我的页面上重写了下拉菜单的样式，给了下拉菜单一个乡下的箭头当背景。开始用的图片都是一样分辨率的，但是显然这样做是不对的，因为dpr=2和dpr=3时图片就会超级小，几乎看不到。所以，就重新切图，分别切了 2× 、3×的图片

效果：
安卓，dpr=1

iphone5，dpr=2

iphone6+，dpr=3

2）flexible不支持PC端，只能适配手机端。
但是我的项目需要在PC端也适用，所以我又写了两个媒体查询，其实这两个媒体查询的代码是一样的，之所以写两个，是为了避开width=1242px，因为iphone6+的设备独立宽为 414px；它的dpr=3，所以其物理像素为414×3=1242px；
如果设置的媒体查询范围包括了1242px，那么iphone6+的样式也会跟着修改。

这个项目一直在修改，我 也一直在学习，从最初的第一版只是简单还原设计稿，没有自适应，到通过百分比自适应布局，再到根据dpr动态调整font-size，一步一步，学习了很多东西。现在还有一个问题，就是布局的问题，现在布局宽度都是用rem写死的，师父建议使用flex布局。接下来就是用flex布局写一下。加油~~