配置前言

專案構建：基於-cli3構建，使用post-px2rem px2rem-loader進行rem適配

實現原理：每www.cppcns.com次打包，webpack通過使用外掛postcss-px2rem，幫我們自動將px單位轉換成rem單位

px2rem是一個外掛，功能是將px自動轉換為rem，幫助開發者減少畫素間的相互轉換計算過程。

前方有坑：UI框架部分元件使用將css作為內聯樣式直接寫在html標籤內，打包適配時不會讀取相關css,所以要配置相關樣式，在style中需要" !important "進行樣式覆蓋。

實現步驟

第一步，安裝postcss-http://www.cppcns.com

開啟命令列工具，輸入以下指令安裝外掛(當然用淘寶映象cnpm安裝會更快)

npm install postcss-px2rem px2rem-loader --save

第二步，在根目錄src中新建util目錄下新建rem.等比適配檔案

// rem等比適配配置檔案
// 基準大小
const baseSize = 16
// 設定 rem 函式
function setRem () {
  // 當前頁面寬度相對於 1920寬的縮放比例，可根據自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設定頁面根節點字型大小（“Math.min(scale,2)” 指最高放大比例為2，可根據實際業務需求調整）
  document.documentwww.cppcns.com
 
Element.style.fontSize = baseSize * Math.min(scale,2) + 'px'
}
// 初始化
setRem()
// 改變視窗大小時重新設定 rem
window.onresize = function () {
  setRem()
}

第三步，在main.js中引入適配檔案

import './util/rem'

第四步，到vue.config.js中配置外掛

// 引入等比適配外掛
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcsasjIys = px2rem({
  // 基準大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比適配外掛
module.exports = {
  lintOnSave: true,css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

總結

到此這篇關於vue+px2rem實現pc端大屏自適應的文章就介紹到這了,更多相關vue+px2rem大屏自適應內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！