Vue 屏幕適配 postcss-pxtorem

此適配方案是每次屏幕尺寸或分辨率發生大小的時候都會把所有的px替換成rem單位。
1、安裝依賴

npm install postcss-pxtorem -D

2、在根目錄創建postcss.config.js文件

module.exports = {
  plugins: {
autoprefixer: {},
"postcss-pxtorem": {
  rootValue: 19.2,
  propList: ["*"]
}
 }
};

3、創建rem.js

// 設置 rem 函數
function setRem() {
 // 320 默認大小16px; 320px = 20rem ;每個元素px基礎上/16
 let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  //得到html的Dom元素
  let htmlDom = document.getElementsByTagName("html")[0];
  //設置根元素字體大小
  htmlDom.style.fontSize = htmlWidth / 100 + "px";
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function() {
  setRem();
};

4、將rem.js引入main.js中

import "./你的路徑/rem.js";

5、最後別忘了重啓項目！

下面隨便找個東西測試一下
我這寫了一個100px * 100px的圖片， 在代碼中是這樣的

運行後在控制檯中是這樣的

大功告成！