vue根据html设置rem,vue中rem的配置的方法示例

在Vue中设置rem的方式可以通过在入口文件（main.js）中设置一个全局的CSS样式，然后根据设备的宽度动态计算出font-size的大小。具体步骤如下：

1. 安装postcss-pxtorem 和 lib-flexible

npm install postcss-pxtorem lib-flexible

2. 在项目根目录下创建postcss.config.js文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度的1/10，如果设计稿宽度是750，则rootValue应该设置为75
      propList: ['*']
    }
  }
}

3. 在main.js中引入lib-flexible，将其作为Vue项目的第一个依赖：

import 'lib-flexible/flexible.js'

4. 在App.vue中添加以下全局CSS样式：

html {
  font-size: 16px;
}

5. 在需要使用rem单位的组件中，按照设计稿的尺寸设置对应的样式即可。例如，如果设计稿中某个元素的宽度是100px，则在组件中设置样式为：

width: 2.66667rem; /* 100 / 37.5 = 2.66667 */

这样做可以根据设备的宽度动态计算出font-size的大小，从而实现对rem单位的支持。