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

2021-07-30 11:01:09 阅读：377 来源： 互联网

标签：插件 vue const px2rem 适配 pc rem postcss

配置前言

项目构建：基于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,const,px2rem,适配,pc,rem,postcss
来源： https://www.cnblogs.com/xingnizhiren/p/15078606.html