手淘 php页面,使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端...

本帖最后由 学霸_ios之webapp 于 2016-11-4 14:33 编辑

meta标签

标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

留个悬念，因为后面的解决方案中需要重度依赖meta标签。CSS单位rem

在font size of the root element.

简单的理解，rem就是相对于根元素的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。前端实现方案

了解了前面一些相关概念之后，接下来我们来看实际解决方案。在整个手淘团队，我们有一个名叫lib-flexible是什么？

当然你可以直接使用阿里CDN：

将代码中的{{version}}换成对应的版本号0.3.4。使用方法

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:

或者直接加载阿里CDN的文件：

另外强烈建议对JS做内联处理，在所有资源加载之前执行这个JS。执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。

如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

除此之外，在引入

其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。在此不建议手动强制设置dpr，因为在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。

if (!dpr && !scale) {    var isAndroid = win.navigator.appVersion.match(/android/gi);    var isIPhone = win.navigator.appVersion.match(/iphone/gi);    var devicePixelRatio = win.devicePixelRatio;    if (isIPhone) {        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                            dpr = 3;        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){            dpr = 2;        } else {            dpr = 1;        }    } else {        // 其他设备下，仍旧使用1倍的方案        dpr = 1;    }    scale = 1 / dpr;}

flexible的实质

flexible实际上就是能过JS来动态改写meta标签，代码类似这样：var metaEl = doc.createElement('meta');var scale = isRetina ? 0.5:1;metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {    document.documentElement.firstElementChild.appendChild(metaEl);} else {    var wrap = doc.createElement('div');    wrap.appendChild(metaEl);    documen.write(wrap.innerHTML);}

事实上他做了这几样事情：动态改写标签

给元素添加data-dpr属性，并且动态改写data-dpr的值

给元素添加font-size属性，并且动态改写font-size的值

。把视觉稿中的px转换成rem

读到这里，大家应该都知道，我们接下来要做的事情，就是如何把视觉稿中的px转换成rem。在此花点时间解释一下。

首先，目前日常工作当中，视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px、750px以及1125px宽度为准。甚至为什么？大家应该懂的(考虑Retina屏)。

以750px为基础设计，UI设计会帮你把相关的信息在视觉稿上标注出来。

目前Flexible会将视觉稿分成100份(主要为了以后能更好的兼容vh和vw)，而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：1a   = 7.5px1rem = 75px

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，对应的font-size为75px：

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。如何快速计算

在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。为了能让大家更快进行转换，可以去下载px转换rem的小工具。