vue 开发H5适配方案

一、通过JS实现适配

　　1、清除浏览器默认样式

　　　　创建reset.css，在main.js中importreset.css

　　2、实现页面自适应（rem方式在750下1rem=100px），在index.html文件中进行配置

　　　　<script>
　　　　　　(function () {
     　　 　　　　// 在标准 375px 适配下，100px = 1rem;
      　　　　　　var baseFontSize = 100;  
      　　　　　　var baseWidth = 375;
 
      　　　　　　var set = function () {
        　　　　　　　var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        　　　  　　 　　var rem = 100;
        　　　　　　　　if (clientWidth != baseWidth) {
          　　　　　　　　　　rem = Math.floor(clientWidth / baseWidth * baseFontSize);
       　　　　　　 　　}
 
        　　　　　　　　document.querySelector('html').style.fontSize = rem + 'px';
     　　　　 　　}
      　　　　　　set();
 
      　　　　　　window.addEventListener('resize', set);
    　　　　　　}());
　　　　　　　export default {
  　　　　　　　　name: 'App',
　　   　　 　　}
　　　　　</script>

二、通过postcss插件实现

　　1、安装postcss-loader

　　　　npm i postcss-loader --save-dev

　　2、安装postcss-px-to-viewport

　　　　npm install postcss-px-to-viewport --save-dev

　　3、配置.postcssrc.js(如果没有该文件，在项目下新建一个)

　　　　module.exports = {
  　　　　"plugins": {
     　　　　 "postcss-import": {},
     　　　　 "postcss-url": {},
      　　　　"postcss-px-to-viewport": {
          　　　　viewportWidth: 750,     //  视窗的宽度，对应的是我们设计稿的宽度，一般是750
          　　　　viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
          　　　　unitPrecision: 3,       //  指定`px`转换为视窗单位值的小数位数
          　　　　viewportUnit: 'vw',     // 指定需要转换成的视窗单位，建议使用vw
          　　　　selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          　　　　minPixelValue: 1,       //  小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
          　　　　mediaQuery: false       // 允许在媒体查询中转换`px`
      　　　　},
      　　　　"cssnano": {
          　　　　preset: "advanced",
          　　　　autoprefixer: false,
          　　　　"postcss-zindex": false
      　　　　}
  　　　　}
　　　}

标签：vue,视窗,适配,px,H5,clientWidth,rem,var,postcss
来源： https://www.cnblogs.com/vofill/p/16598577.html