vue PC端螢幕分辨率自适應

場景

不同的電腦螢幕大小根據寬度進行等比縮放，自适應。代碼中的機關還是使用px,根據設計稿的尺寸來進行還原。它會自動轉為rem。

第一步

安裝依賴

npm install postcss-px2rem px2rem-loader --save
           

第二步

建立rem.js檔案，可以建立個utils目錄放在其下面，rem.js代碼檔案如下

// rem等比适配配置檔案
// 基準大小
const baseSize = 16;
// 設定 rem 函數
function setRem() {
  // 目前頁面螢幕分辨率相對于1920寬的縮放比例，可根據自己需要修改
  let scale = document.documentElement.clientWidth / 1920;
  // 下面這一行代碼可以忽略，這是我另外加的，我加這行代碼是為了螢幕寬度小于1280時就不繼續等比縮放了
  if (document.documentElement.clientWidth < 1280) scale = 1280 / 1920
  // 設定頁面根節點字型大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據實際業務需求調整）
  document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`;
}
// 初始化
setRem();
// 改變視窗大小時重新設定 rem
window.onresize = () => {
  setRem();
};
           

第三步

main.js檔案中引入rem.js

第四步

vue.config.js中配置插件，配置完重新開機

// 引入等比适配插件
const px2rem = require('postcss-px2rem');

// 配置基本大小
const postcss = px2rem({
  // 基準大小 baseSize，需要和rem.js中相同
  remUnit: 16,
});
module.exports = {
	其他代碼...
	css: {
      loaderOptions: {
        postcss: {
          plugins: [
            postcss,
          ],
        },
      },
    }
}
           

這樣就完成自适應螢幕啦

一點點小知識

如果想讓某個元素不随着螢幕大小而縮放，可以寫成大寫的PX,例如width:200PX;這樣這個元素一直會是這個像素了。還有，因為今天是程式員節，是以才發這篇部落格哦，嘻嘻。1024程式員快樂！