如何使用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怎么配置
