移动端适配解决方案

2017-2-24 liuweibo

1.meta标签

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

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

2.css单位rem

简单的理解,rem就是相对于根元素html的font-size来做计算,而我们的方案中使用rem单位,是能轻易的根据html的font-size计算出元素的盒模型大小

3.前端实现方案

了解了前面一些相关概念之后,接下来我们来看实际解决方案。在整个手淘团队,有一个名叫lib-flexible的库,而这个库就是用来解决H5页面终端适配的

lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件

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



使用方法

lib-flexible库的使用方法非常的简单,只需要在Web页面的中添加对应的flexible_css.js,flexible.js文件:

执行这个JS后,会在元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3,同时会给html加上对应的font-size的值,比如说75px

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

除此之外,在引入lib-flexible需要执行的JS之前,可以手动设置meta来控制dpr值,如:

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

flexible的实质

动态改写 标签

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

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

创建HTML模板

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

cssrem

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件

网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2017 www.elight.cn, All Rights Reserved