您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue.js移動端配置flexible.js及注意事項(xiàng)的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js移動端配置flexible.js及注意事項(xiàng)的示例分析”這篇文章吧。
主體
flexible.js適配方案采用rem布局,根據(jù)屏幕分辨率大小不同,調(diào)整根元素html的font-size,從而達(dá)到每個(gè)元素寬高自動變化,適配不同屏幕
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來解決移動端適配了。
lib-flexible會自動在html的head中添加一個(gè)meta name="viewport"的標(biāo)簽,同時(shí)會自動設(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就會默認(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ì)稿量出來的尺寸都手動去計(jì)算一下rem,就會導(dǎo)致我們效率比較慢,還有可能會計(jì)算錯(cuò)誤,所以我們可以使用px2rem-loader自動將css中的px轉(zhuǎn)成rem
使用 webpack 的 px2rem-loader,自動將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,編譯后會直接轉(zhuǎn)化成rem —- 除開下面兩種情況,其他長度用這個(gè)
?在px后面添加/*no*/,不會轉(zhuǎn)化px,會原樣輸出。 —- 一般border需用這個(gè)
?在px后面添加/*px*/,會根據(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編寫移動端頁面了
以上是“vue.js移動端配置flexible.js及注意事項(xiàng)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。