前端：移动端适配postcss-px-to-viewport

postcss-px-to-viewport

• 安装postcss-px-to-viewport
  npm install postcss-px-to-viewport --save-dev
• 在项目根目录下创建postcss.config.js文件，并配置postcss-px-to-viewport插件：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,  // 设计稿宽度
      viewportHeight: 667,  // 设计稿高度
      unitPrecision: 5, // 转换后的vw单位保留的小数位数
      viewportUnit: 'vw', // 要转换的单位
      selectorBlackList: [], // 需要忽略的CSS选择器，如果有一些选择器不希望被转换，可以在这里设置
      minPixelValue: 1, // 小于等于该数值的px单位不会被转换，例如设置为1表示小于等于1px的单位不转换
      mediaQuery: false // 是否允许在媒体查询中转换px，默认为false，表示不转换媒体查询中的px单位
    }
  }
}

• 在项目中引入viewport.js文件，用于设置viewport的缩放比例：（用来设置viewport的缩放比例，根据设备的宽度动态设置根元素的字体大小，从而实现移动端适配）

// viewport.js
(function() {
  var docEl = document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';  // 设计稿宽度
  };
  if (!document.addEventListener) return;
  window.addEventListener(resizeEvt, recalc, false);
  document.addEventListener('DOMContentLoaded', recalc, false);
})();

• 在main.js中引入viewport.js文件：

import './viewport.js';

• 在样式表中使用vw单位进行布局，例如：

.container {
  width: 100vw;
  height: 50vw;
  font-size: 4vw;
}