vue中如何使用rem

方法一、在Vue中实现跨浏览器的rem适配，可以借助postcss-pxtorem插件和lib-flexible库来实现

1、安装postcss-pxtorem插件：

npm install postcss-pxtorem --save-dev

2、在项目根目录下创建postcss.config.js文件，并配置postcss-pxtorem：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿宽度/10，例如设计稿宽度为375px，则rootValue为37.5
      propList: ['*'],
      selectorBlackList: ['html'], // 过滤不需要转换的选择器，如html选择器不进行转换
    },
  },
};

3、安装lib-flexible库

npm install lib-flexible --save

4、在项目入口文件（一般是main.js）中引入lib-flexible：

// main.js
import 'lib-flexible';

以上步骤完成后，使用rem作为单位的样式将会自动进行适配。postcss-pxtorem插件会将CSS中的像素值转换为rem值，而lib-flexible库会根据设备的屏幕尺寸动态设置根元素的字体大小，从而实现跨浏览器的适配。

需要注意的是，在编写样式时，应该使用设计稿上的像素值来设置样式，插件会自动将其转换为rem值。例如，如果设计稿宽度为750px，设计稿上某个元素的宽度为100px，那么在CSS中应该设置为10rem。

通过以上步骤，就可以实现Vue项目中的跨浏览器的rem适配

方法二、在Vue移动端开发中，使用rem进行DOM自适应是一种常见的方法。rem是相对于根元素(html)的字体大小的单位，通过设置根元素的字体大小，可以实现页面元素的自适应

1、在项目的入口文件（一般是main.js），设置根元素的字体大小：

// main.js
import Vue from 'vue';

// 计算并设置根元素的字体大小
function setRem() {
  const rem = document.documentElement.clientWidth / 10;
  document.documentElement.style.fontSize = rem + 'px';
}

// 初始化时调用一次
setRem();

// 监听窗口大小变化时重新计算
window.addEventListener('resize', setRem);

2、在CSS样式中使用rem作为单位：

/* 样式文件 */
.container {
  width: 6rem; /* 以rem为单位设置宽度 */
  font-size: 0.8rem; /* 以rem为单位设置字体大小 */
}