手淘的flexible.js解决手机适配问题

如何使用flexible.js作手机适配

• 作移动端网页确定须要作适配，之前都用的fixscreen.js，对比一下，以为flexible.js更好吧，毕竟是大厂出的东西。
• 第一步要给页面加在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); }

• 第二步引入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。
• 第三步将视觉稿中的px转化成rem，若是你是用sublimeText3的话能够装CSSREM的插件，到时候你输入px时，它会转换成rem。cssrem怎么配置