曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？
一些基本概念
视窗 viewport
简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。
移动端的viewport太窄，为了能更好为CSS布局服务，所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。
物理像素(physical pixel)
物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
设备独立像素(density-independent pixel)
设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
CSS像素
CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
设备像素比(device pixel ratio)
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：设备像素比 = 物理像素 / 设备独立像素
1、直接使用阿里cdn
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。
另外强烈建议对JS做内敛处理，在所有资源加载之前执行这个JS。执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。
事实上他做了这几样事情：
动态改写标签
给元素添加data-dpr属性，并且动态改写data-dpr的值
给元素添加font-size属性，并且动态改写font-size的值
如何快速计算rem
1、sublime插件CSSREM
2、css处理器通过函数和混合宏实现
3、PostCSS(px2rem)px2rem(推荐)
通过方式三处理之后这样调用：
.selector{
width:150px;
height:64px;/*px*/
font-size:28px;/*px*/
border:1pxsolid#ddd;/*no*/
}
会自动编译为：
.selector{
width:2rem;
border:1pxsolid#ddd;
}
[data-dpr="1"] .selector{
height:32px;
font-size:14px;
}
[data-dpr="2"] .selector{
height:64px;
font-size:28px;
}
[data-dpr="3"] .selector{
height:96px;
font-size:42px;
}
字号不使用rem
在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
.selector{
width:2rem;
border:1pxsolid#ddd;
}
[data-dpr="1"] .selector{
height:32px;
font-size:14px;
}
[data-dpr="2"] .selector{
height:64px;
font-size:28px;
}
[data-dpr="3"] .selector{
height:96px;
font-size:42px;
}
为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：
@mixinfont-dpr($font-size){
font-size:$font-size;
[data-dpr="2"] &{
font-size:$font-size*2;
}
[data-dpr="3"] &{
font-size:$font-size*3;
}
}
使用：@include font-dpr(16px);
总结
其实H5适配的方案有很多种，网上有关于这方面的教程也非常的多。不管哪种方法，都有其自己的优势和劣势。而本文主要介绍的是如何使用Flexible这样的一库来完成H5页面的终端适配。为什么推荐使用Flexible库来做H5页面的终端设备适配呢？主要因为这个库在手淘已经使用了近一年，而且已达到了较为稳定的状态。除此之外，你不需要考虑如何对元素进行折算，可以根据对应的视觉稿，直接切入。
网友评论