移动端rem适配

1.index.html

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,
    user-scalable=no">

2.main.js

// rem 适配
var falses = true;
//----------------------------------
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  if (htmlWidth > 413 && htmlWidth<735) {
    htmlWidth = 414;
    console.log( htmlWidth);
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }
  //小米8适配
  if (htmlWidth == 393 ) {
    htmlWidth = 393;
    console.log( htmlWidth);
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }

  if (htmlWidth <= 375) {
    htmlWidth = 375;
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }
  if (htmlWidth > 1000) {
    falses =false

  }

};
if (falses){
window.onresize = setHtmlFontSize;
setHtmlFontSize();

}

3. 查看当期机型屏幕尺寸

            const screenWidth = document.body.clientWidth
            const screenHeight = document.body.clientHeight
            alert(`当前设备的屏幕尺寸（宽 x 高）：${screenWidth} x ${screenHeight}`)

4.手机查看vue项目

vue.config.js

 devServer: {
        host: '111.11.11.11', // ip
        port: 8081, // 设置端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        proxy: null  //设置代理
    },