vue+px2rem实现pc端大屏自适应(rem适配) 转载的

配置前言

项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配
实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位
前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。
————————————————
版权声明:本文为CSDN博主「楚猴修」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43607164/article/details/100512220

第一步,安装postcss-px2rem及px2rem-loader

打开命令行工具,输入以下指令安装插件(当然用淘宝镜像cnpm安装会更快)

npm install postcss-px2rem px2rem-loader --save

第二步,在根目录src中新建util目录下新建rem.js等比适配文件

 1 // rem等比适配配置文件
 2 // 基准大小
 3 const baseSize = 16
 4 // 设置 rem 函数
 5 function setRem () {
 6   // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
 7   const scale = document.documentElement.clientWidth / 1920
 8   // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
 9   document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
10 }
11 // 初始化
12 setRem()
13 // 改变窗口大小时重新设置 rem
14 window.onresize = function () {
15   setRem()
16 }

第三步,在main.js中引入适配文件

import './util/rem'

第四步,到vue.config.js中配置插件

 1 // 引入等比适配插件
 2 const px2rem = require('postcss-px2rem')
 3 
 4 // 配置基本大小
 5 const postcss = px2rem({
 6   // 基准大小 baseSize,需要和rem.js中相同
 7   remUnit: 16
 8 })
 9 
10 // 使用等比适配插件
11 module.exports = {
12   lintOnSave: true,
13   css: {
14     loaderOptions: {
15       postcss: {
16         plugins: [
17           postcss
18         ]
19       }
20     }
21   }
22 }

 

上一篇:Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】


下一篇:vue 配置移动单位转换插件