我們在純靜態網頁中使用js來適配各種移動端的方法之前的文章已經講過了,由于vue有更牛逼的插件,所以我們這里選擇使用插件來適配移動端。
首先,我們安裝兩個插件postcss-pxtorem和lib-flexible,postcss-pxtorem會把px自動轉化為rem,而lib-flexible會自動調整html的font-size。
npm install amfe-flexible -S npm install postcss-pxtorem -D
然后,我們在main.js中引入amfe-flexible。
import ‘amfe-flexible’
比較特殊的是postcss-pxtorem不用引入,我們需要根目錄下創建一個新的文件,名為postcss.config.js,內容為:
module.exports={
plugins:{
'postcss-pxtorem':{
rootValue:75,//設計圖的1/10
propList:['*'],//設定轉化為rem的css屬性
selectorBlackList:['van','weui','mu'] // 忽略轉換正則匹配項
}
}
}配置完這些后,我們就能按照px的方法正常使用了,插件會自動計算rem??磦€例子。
這邊創建一個寬高為750*300px 的背景為紅色字體為黃色的塊元素。

頁面中可以看到自動轉為了rem。

上一篇: 利用用戶代碼片段快速生成vue3模板
下一篇: vue移動端ui-vant的使用



