vue项目中配置rem

• rem：是相对于浏览器的根（HTML）元素的font-size来确定大小的单位，html默认情况下fon-size：12px
• rem实现适配： rem是相对于根元素html的font-size来决定大小,相当于根元素的font-size提供了一个基准，当页面的宽度发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 需要先动态设置html根元素的font-size,再计算出其他页面元素以rem为固定单位的值

1. 新建remConfig.js文件

let remConfig = () => {
var deviceWidth = document.documentElement.clientWidth; //获取可视屏幕宽度
if (deviceWidth > 750) //若移动端配置宽度750以下，统一按照750进行计算 
    deviceWidth = 750; 
    document.documentElement.style.fontSize = deviceWidth / 7.5 + "px"; //设置fontSize为7.5设备宽度大小 
}; 
window.onresize = function () { 
    remConfig() // 当窗口发生变化重新调用remConfig
    // 此步骤可省略，因为移动端一般没有设备大小，便于在chrome调试 
}; 
 export default remConfig;

2.main.js内设置rem相关配置

import remConfig from '../config/remConfig' // 引入remConfig.js文件
remConfig();

通过这种方法配置，在750可视区尺寸内可知1rem=100px；因此，假设在750设计稿中取得文字字体大小为30px，可设置font-size：0.3rem