利用手淘的flexible.js搞定手机适配

发布时间:2020年1月3日

教大家如何使用flexible.js做手机适配,在前端开发以及切图的时候,经常会用到这个,因为做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是鹅厂出的东西。跨屏网 Kuaping.com 小编给大家整理了3大步骤,自己照做就好啦。
1,给页面加viewport

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

因为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); }
2,引入flexible.js

你可以直接下载到项目来,我直接使用阿里CDN,毕竟很小

<script src=”http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js”></script>
建议这个插件放在head里面,因为执行这个JS后,会在元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3,同时会给html加上对应的font-size的值,比如说75px。
3,将视觉稿中的px转化成rem

如果你是用sublimeText3的话可以装CSSREM的插件,到时候你输入px时,它会转换成rem。

本文由手机网站建设、网站移动端适配专家-跨屏网原创,转载请保留版权( PC网站快速适配手机端www.kuaping.com跨屏网自主开发跨屏平台,网站引用一句话JS,即可快速适配手机端,打通手机版、微信等众多终端。欢迎来电咨询!热线:027-81777732、13343477732

标签:, ,