vue不同pc端的適配(轉化為rem)
阿新 • • 發佈:2022-04-02
一、安裝postcss-px2rem及px2rem-loader
npm install postcss-px2rem px2rem-loader --save
二、在根目錄src中新建utils目錄下新建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中配置外掛
// 引入等比適配外掛 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({// 基準大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比適配外掛 module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } }