手淘的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怎麼配置