vue項目使用Vant框架Rem適配（postcss-pxtorem、lib-flexible ）的安裝使用

1.安裝：

使用的是vue-cli+webpack，通過npm來安裝的

npm i postcss-px2rem lib-flexible --save-dev 或者 yarn add postcss-px2rem lib-flexible

2.引入lib-flexible

在main.js中引入lib-flexible

//導入rem 的 js,動態的設置了不同屏幕的html根元素的 font-sizeimport "lib-flexible"

3.在plublic中index.html刪除meta標簽：

通過meta標簽，設置設備寬度以及縮放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> flexible會根據屏幕頁面自動添加<meta name="viewport"> 標簽，動態控制initial-scale,maximun-scale,minimun-scale等屬性的值

4.安裝postcss-pxtorem

一款 postcss 插件，用于將單位轉化為 rem 只是用來把單位轉化為rem 沒別的了

npm install postcss-pxtorem -D

5.配置vue.config.js：

module.exports=function(){devServer:{port:3000,open:true},//rem配置css: {loaderOptions: {css:{},postcss: {plugins: [require('postcss-px2rem')({//這里是配置項，詳見官方文檔remUint:37.5,propList: ['*'], //設置px轉換成rem的屬性值，*表示所有屬性的px轉換為rem}),]}}} }

如果沒有配置vue.config.js，可以在build/vue-loader.config.js配置：

const precss = require('precss') const pxtorem = require('postcss-px2rem') module.exports = {......postcss:[precss(),pxtorem({remUnit: 37.5, //設計尺寸propList: ['*']//自動轉化rem})], }

6.當配置完之后，只需要重啟下服務，就自動轉化為rem了

npm run dev 或者 npm run serve

總結

以上是生活随笔為你收集整理的Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。