快捷導(dǎo)航

詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)

更新時(shí)間：2019年04月10日 09:43:32 作者：pubdreamcc

最近在用vue做移動(dòng)端項(xiàng)目，網(wǎng)上找了一些移動(dòng)端適配的方案，個(gè)人覺得手淘團(tuán)隊(duì)flexible.js還是比較容易上手，在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧

前言

最近在用vue做移動(dòng)端項(xiàng)目，網(wǎng)上找了一些移動(dòng)端適配的方案，個(gè)人覺得手淘團(tuán)隊(duì)flexible.js還是比較容易上手，在這里做下總結(jié)。

主體

flexible.js適配方案采用rem布局，根據(jù)屏幕分辨率大小不同，調(diào)整根元素html的font-size，從而達(dá)到每個(gè)元素寬高自動(dòng)變化，適配不同屏幕

1.安裝lib-flexible.js

npm install lib-flexible --save

1.在項(xiàng)目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

通過要以上兩步，就完成了在vue項(xiàng)目使用lib-flexible來解決移動(dòng)端適配了。

lib-flexible會(huì)自動(dòng)在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽，同時(shí)會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size。假如設(shè)計(jì)稿的寬度是750px，此時(shí)1rem應(yīng)該等于75px。假如量的某個(gè)元素的寬度是150px，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem

這里需要注意幾點(diǎn)：

1.檢查一下html文件的head中，如果有 meta name="viewport"標(biāo)簽，需要將他注釋掉，因?yàn)槿绻羞@個(gè)標(biāo)簽的話，lib-flexible就會(huì)默認(rèn)使用這個(gè)標(biāo)簽。而我們要使用lib-flexible自己生成的 meta name="viewport"來達(dá)到高清適配的效果。

2.因?yàn)閔tml的font-size是根據(jù)屏幕寬度除以10計(jì)算出來的，所以我們需要設(shè)置頁面的最大寬度是10rem。

3.如果每次從設(shè)計(jì)稿量出來的尺寸都手動(dòng)去計(jì)算一下rem，就會(huì)導(dǎo)致我們效率比較慢，還有可能會(huì)計(jì)算錯(cuò)誤，所以我們可以使用px2rem-loader自動(dòng)將css中的px轉(zhuǎn)成rem

使用 webpack 的 px2rem-loader,自動(dòng)將px轉(zhuǎn)換為rem

1.安裝px2rem-loader

npm install px2rem-loader --save-dev

1.配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加如下配置

找到generateLoaders方法，在函數(shù)里如下配置

1.px2rem 用法

安裝px2rem后，再使用px上有些不同，大家可以參考px2rem官方介紹，下面簡單介紹一下。

•直接寫px，編譯后會(huì)直接轉(zhuǎn)化成rem —- 除開下面兩種情況，其他長度用這個(gè)

•在px后面添加/*no*/，不會(huì)轉(zhuǎn)化px，會(huì)原樣輸出。 —- 一般border需用這個(gè)

•在px后面添加/*px*/,會(huì)根據(jù)dpr的不同，生成三套代碼?！? 一般字體需用這個(gè)

下面是本人寫的實(shí)例代碼，可以參考

原始代碼：

.box{
  width: 150px;
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/
}

編譯后生成代碼：

.box{
  width: 2rem;
  border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
  font-size: 14px;
}
[data-dpr="2"] .selector {
  font-size: 28px;
}
[data-dpr="3"] .selector {
  font-size: 42px;
}

這樣基本配置就完成了，重啟項(xiàng)目就可以使用lib-flexible+rem編寫移動(dòng)端頁面了

后綴

交個(gè)朋友，可以一起進(jìn)階前端學(xué)習(xí)

找到我： GitHub

總結(jié)

以上所述是小編給大家介紹的vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: