npm install --save-dev postcss-plugin-px2rem

vue.config.js

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 16, //換算基數(shù)， 默認(rèn)100 ，1 / fontsize(html) = x 原來(lái)的1px轉(zhuǎn)為0.0625rem// unitPrecision: 5, //允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)字。//propWhiteList: [], //默認(rèn)值是一個(gè)空數(shù)組，這意味著禁用白名單并啟用所有屬性。// propBlackList: [], //黑名單// exclude: /(node_modules)/, //默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請(qǐng)把此屬性設(shè)為默認(rèn)值// selectorBlackList: [], //要忽略并保留為px的選擇器// ignoreIdentifier: false, //（boolean/string）忽略單個(gè)屬性的方法，啟用ignoreidentifier后，replace將自動(dòng)設(shè)置為true。// replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退。// mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px。// minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會(huì)被轉(zhuǎn)rem)。 默認(rèn) 0//exclude: "/node_modules/",// selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下 排除指定的文件的影響// propBlackList: ['border']})]}}} }

• 以上完成px->rem，為了某些已經(jīng)以rem為單位的組件不受影響，如消息框圖標(biāo)，這里將rootValue設(shè)置為html默認(rèn)字體大小16px（html根字體大小代表rem代表的大小，此時(shí)1rem=16px）
• main.js中引入rem.js，監(jiān)聽(tīng)窗口變化，等比例改變根fontsize達(dá)到改變r(jià)em的大小

rem.js

// 設(shè)置 rem 函數(shù) function setRem() {let htmlWidth = document.documentElement.clientWidth// let htmlHeight = document.documentElement.clientHeight//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];// //設(shè)置根元素字體大小 937 / 16 = 58.5625 ， 937是谷歌1080 - 工具欄高度// htmlDom.style.fontSize = (htmlHeight / 58.5625) + 'px';//設(shè)置根元素字體大小 1920 / 16 = 120htmlDom.style.fontSize = (htmlWidth / 120) + 'px'; } // 初始化 setRem(); // 改變窗口大小時(shí)重新設(shè)置 rem window.onresize = function () {setRem() }

總結(jié)

以上是生活随笔為你收集整理的vue引入postcss-plugin-px2rem，px转rem的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。