vue2 项目使用px2rem插件做自适应

原创已于 2023-09-08 12:49:42 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-03-13 16:44:28 首次发布

前端框架专栏收录该内容

25 篇文章

订阅专栏

首先安装插件

npm install postcss-px2rem
npm install px2rem-loader

在根目录下创建 vue.config.js，写入

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 16   //基准大小 baseSize
})
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

在 App.vue 里的 mounted() 写

// 基准大小   1rem为16px
const baseSize = 16;
// 设置 rem 函数
function setRem() {
	// 当前页面宽度相对于多宽的缩放比例，可根据自己需要修改。
	const scale = document.documentElement.clientWidth / 1920;
	// 设置页面根节点字体大小
	document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
	setRem();
};