闲聊:
年前小颖第一家公司同事问我有做过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
- // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
- document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
- }
- // 初始化
- setRem()
- // 改变窗口大小时重新设置 rem
- window.onresize = function () {
- setRem()
- }
第三步:
在main.js中引入适配文件
第四步:
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
- ]
- }
- }
- }
- }