Vue项目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();

通过这种方式，在750设计稿尺寸下，可以获得1rem=100px; 因此，假设在750设计稿中量得标题字体大小为32px,不考虑父元素设置font-size情况下，设置该标题字体大小为0.32rem;