代码改变世界
[登录 · 注册]
  • 移动端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  //设置代理
        },
    
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/ouyangkai/p/13686314.html
走看看 - 开发者的网上家园