rem布局

如果采用rem布局,初始化根元素的字体大小，设计图中测量的宽度或者高度除以 100.

下面以720px设计稿为示例：

<script>
    !(function (global) {
      var window = global || this,
        width = 720,
        docEl = window.document.documentElement,
        dpr = window.devicePixelRatio || 1,
        resizeEvt = 'resize',
        resizeCall = (function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) {
                docEl.style.fontSize = 100 + 'px';
              } else {
                docEl.style.fontSize = 100 * (clientWidth / width) + 'px';
              }
              return arguments.callee;
        })();
    
      dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1;
      docEl.setAttribute('data-dpr', dpr);
    
      window.addEventListener && window.addEventListener(resizeEvt, resizeCall, false);
    }(this));
  </script>

postcss-px2rem

postcss-px2rem具体详解

利用postcss-px2rem插件可以将px转成rem

require('postcss-px2rem')({ remUnit: 100 })  // 100为换算的基数

效果：

编译前写法

.course-wrapper {
  padding: 0 30px 46px;
}

编译后：

.course-wrapper[data-v-686b4586] {
    padding: 0 .3rem .46rem;
}

autoprefixer 处理浏览器兼容

autoprefixer参数详细用法

require('autoprefixer')({
    browsers: ['last 10 versions']
})

效果：

编译前：

.home {
    display: flex;
}

编译后：

.home {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

vconsole 调试插件

development环境可以添加vconsole插件，方便调试

vConsole --- 官方github地址

<script>
    var IS_DEVELOPMENT = true;
    if (IS_DEVELOPMENT) {
      var head = document.getElementsByTagName('head')[0], scriptTag = document.createElement('script');
      scriptTag.type = 'text/javascript';
      scriptTag.src = 'https://xxx.com/vconsole.min.js';
      head.appendChild(scriptTag);
      setTimeout(function () {
        var scriptContent = document.createElement('script');
        scriptContent.type = 'text/javascript';
        scriptContent.textContent = 'var vConsole = new VConsole()';
        head.appendChild(scriptContent);
      }, 1000);
    }
</script>

下面附上入口文件基本代码，仅供参考：

<html lang="en">

<head>
  <meta charset="utf-8">
  <!--user-scalable=no 禁止用户缩放页面-->
  <meta name="viewport"
    content="width=device-width,height=device-height,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="description"
    content="网站的描述">
  <title>网站标题</title>
  <!-- 需要DNS预解析的url -->
  <link rel="dns-prefetch" href="https://xxxx.com">
  <!-- 需要预加载的url -->
  <link rel="preconnect" href="https://xxxx.com">
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="你的网站favicon.ico">
  <!-- 需要提前加载的js -->
  <script src="https://xxx.com/vue.min.js"></script>
  <!-- 需要提前加载的js -->
  <script>
    !(function (global) {
      var window = global || this,
        width = 720,
        docEl = window.document.documentElement,
        dpr = window.devicePixelRatio || 1,
        resizeEvt = 'resize',
        resizeCall = (function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) {
                docEl.style.fontSize = 100 + 'px';
              } else {
                docEl.style.fontSize = 100 * (clientWidth / width) + 'px';
              }
              return arguments.callee;
        })();
    
      dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1;
      docEl.setAttribute('data-dpr', dpr);
    
      window.addEventListener && window.addEventListener(resizeEvt, resizeCall, false);
    }(this));
  </script>
  <!-- development环境可以添加vconsole插件，方便调试 -->
  <script>
    var IS_DEVELOPMENT = true;
    if (IS_DEVELOPMENT) {
      var head = document.getElementsByTagName('head')[0], scriptTag = document.createElement('script');
      scriptTag.type = 'text/javascript';
      scriptTag.src = 'https://xxx.nSDK/vconsole.min.js';
      head.appendChild(scriptTag);
      setTimeout(function () {
        var scriptContent = document.createElement('script');
        scriptContent.type = 'text/javascript';
        scriptContent.textContent = 'var vConsole = new VConsole()';
        head.appendChild(scriptContent);
      }, 1000);
    }
  </script>
</head>
<body>
  <div id="app"></div>
</body>

</html>

如有问题请与我沟通

qq: 543270835

wechat: lz543270835

移动端开发基本配置

rem布局

postcss-px2rem

autoprefixer 处理浏览器兼容

vconsole 调试插件