移动端适配

移动端适配

使用postcss-pxtorem插件将px转成动态rem
因为rem是根据根元素html的值为基准来动态转换px的，也就是说html是多少像素那么1rem 就是多少像素，所以我们必须先根据屏幕的宽度来设置我们的html元素的px值。
新建rem.js文件，在main.js中引用

// 设计稿以750px为宽度，而我把页面宽度设计为10rem的情况下
const baseSize = 75; // 这个是设计稿中1rem的大小。
function setRem() {
   
    // 实际设备页面宽度和设计稿的比值
    const scale = document.documentElement.clientWidth / 750;
    // 计算实际的rem值并赋予给html的font-size
    document.documentElement.style.fontSize = (baseSize * scale