手机端rem配置及媒体查询

手机端meta标签配置

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

rem根据页面宽度调整根字体大小

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 24 * (clientWidth / 640) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 这里在640的设备上1rem = 24px，在其他屏幕宽的时候会自动根据这个比例来动态调整

媒体查询

//第一种
@media screen and (min-width: 320px){html{font-size:312.5%}  }
@media screen and (min-width: 360px){html{font-size:351.56%}  }
@media screen and (min-width: 400px){html{font-size:390.63%}  }
@media screen and (min-width: 440px){html{font-size:429.69%}  }
@media screen and (min-width: 480px){html{font-size:468.75%}  }
@media screen and (min-width: 520px){html{font-size:507.81%}  }
@media screen and (min-width: 560px){html{font-size:546.88%}  }
@media screen and (min-width: 600px){html{font-size:585.94%}  }
@media screen and (min-width: 640px){html{font-size:625%}  }

//第二种
//以750为基准设置font-size为100px
html{
  font-size: 38px;
}
@media only screen and (min-width: 320px) {
  html {
    font-size: 42.666px !important;
  }
}
@media only screen and (min-width: 360px) {
  html {
    font-size: 48px !important;
  }
}
@media only screen and (min-width: 375px) {
  html {
    font-size: 50px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 55.2px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 64px !important;
  }
}
@media only screen and (min-width: 560px) {
  html {
    font-size: 74.666px !important;
  }
}
@media only screen and (min-width: 640px) {
  html {
    font-size: 85.333px !important;
  }
}
@media only screen and (min-width: 720px) {
  html {
    font-size: 96px !important;
  }
}
@media only screen and (min-width: 750px) {
  html {
    font-size: 100px !important;
  }
}
@media only screen and (min-width: 800px) {
  html {
    font-size: 106.666px !important;
  }
}
@media only screen and (min-width: 960px) {
  html {
    font-size: 128px !important;
  }
}

px2rem插件在vue中的使用方法（把px转换为rem）

1、安装px2rem-loader

npm install px2rem-loader

2、配置px2rem-loader

//在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 50, /* 此处50为可调整的值 */
      remPrecision: 8  /* px转rem的精度 ,默认是6*/
    }
  }

  同时把generateLoaders方法中这行
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  替换成这个
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

备注：remUnit: 50 /* 此处50为可调整的值 */此处50由设计稿尺寸决定（eg：当设计稿为375时，打开网页进入调试模式将网页宽度调整至与设计稿相同，得到的html的font-size即为需要设置的值）
默认是将所有的px转换为rem，对于那些不需要转换的如1px border可设置为/*no*/
即不转换为rem

border: 1px;/*no*/ 
font-size: 20px;/*px*/