vue.config配置 px2rem實現pc端大屏自適應(rem適配)
阿新 • • 發佈:2021-06-22
配置前言
專案構建:基於vue-cli3構建,使用postcss-px2rem px2rem-loader進行rem適配
實現原理:每次打包,webpack通過使用外掛postcss-px2rem,幫我們自動將px單位轉換成rem單位
前方有坑:UI框架部分元件使用JavaScript將css作為內聯樣式直接寫在html標籤內,打包適配時不會讀取相關css,所以要配置相關樣式,在style中需要" !important "進行樣式覆蓋。
第一步,安裝postcss-px2rem及px2rem-loader
npm install postcss-px2rem px2rem-loader --save
第二步,在根目錄src中新建util目錄下新建rem.js等比適配檔案
// rem等比適配配置檔案 // 基準大小 const baseSize = 16 // 設定 rem 函式 function setRem () { // 當前頁面寬度相對於 1920寬的縮放比例,可根據自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 設定頁面根節點字型大小(“Math.min(scale, 2)” 指最高放大比例為2,可根據實際業務需求調整) document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 初始化 setRem() // 改變視窗大小時重新設定 rem window.onresize = function () { setRem() }
第三步,在main.js中引入適配檔案
import './utils/rem'
第四步,到vue.config.js中配置外掛,在chainWebpack中加入
config.module .rule('scss') .oneOf('vue') .use('px2rem-loader') .loader('px2rem-loader') .before('postcss-loader') .options({ remUnit: 16 }), // 這裡的16數字要和rem.js裡面的一致 .end()