vue中使用rem

vue中使用rem 寫移動端頁面?
借助兩個插件，將px進行轉(zhuǎn)化為rem。
lib-flexible 用于設(shè)置 rem 基準值。由淘寶手機前端開發(fā)團隊編寫的。postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem。
主要步驟：
a、npm i -S amfe-flexible?
b、import 'amfe-flexible';? //main.js引入rem自適應(yīng)
c、在index.html中添加meta標簽<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
d、npm install postcss-pxtorem --save-dev
e、更改配置
在vue-cli2下，根目錄中的 .postcss.js (沒有，就新建一個)
module.exports = {? "plugins": {? ? "postcss-import": {},? ? "postcss-url": {},? ? // to edit target browsers: use "browserslist" field in package.json? ? "autoprefixer": {},? ? "postcss-pxtorem": { // 此處為添加部分? ? ? rootValue: 37.5, // 對應(yīng)16px 適配移動端750px寬度? ? ? unitPrecision: 5,? ? ? propList: ['*'],? ? ? selectorBlackList: [],? ? ? replace: true,? ? ? mediaQuery: false,? ? ? minPixelValue: 0? ? }? }}
在vue-cli3/4下,根目錄中的 vue.config.js (沒有，就新建一個)
module.exports = {? css: {? ? loaderOptions: {? ? ? postcss: {? ? ? ? plugins: [? ? ? ? ? require('postcss-pxtorem')({ // 把px單位換算成rem單位? ? ? ? ? ? rootValue: 37.5, // 換算的基數(shù)(設(shè)計圖750的根字體為32)? ? ? ? ? ? selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項? ? ? ? ? ? propList: ['*']? ? ? ? ? })? ? ? ? ]? ? ? }? ? }? }}
在編輯器里安裝pxtorem的編輯器插件? pxtorem在編輯器的配置里 把1rem的換算值填上? 750px的設(shè)計稿 1rem = 75px
然后發(fā)現(xiàn)運行報錯? 這里是安裝的rem的插件版本太高?npm i [email protected] 回車
重啟項目