vue項目PC端如何適配不同分辨率屏幕
閑聊：
年前小穎第一家公司同事問我有做過pc端適配的項目嗎，我給妹紙說了下，結果發現沒說完，自己當時也沒想起來，今天干脆總結下，方便自己和大家日后查看
第一步：
安裝postcss-px2rem、px2rem-loader
打開命令行工具，輸入以下指令安裝插件
npm install postcss-px2rem px2rem-loader --save
安裝完后package.json文件會多如圖倆插件
第二步：
在根目錄src中新建utils目錄下新建rem.js等比適配文件
const baseSize = 16 // 設置 rem 函數 function setRem() { // 當前頁面寬度相對于 1920寬的縮放比例，可根據自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 設置頁面根節點字體大?。ā癕ath.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 ] } } } }