屏幕适配

常见屏幕比例16:9（指的是宽为1920，高为1080的屏幕）

1、若是移动端，可用插件px转vw和vh，可以做到屏幕大小改变时，实时适应屏幕大小

postcss.config.js文件做适配

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

2、rem适配

// 适合所有屏幕的适配情况，包括移动端和pc端及大屏
// 750是设计稿的宽度
(function () {
      var b = document.documentElement,
      a = function () {
          // a为屏幕的宽度,例如为375，则实际屏幕宽度比上设计稿的宽度为0.5，也就是说设计稿1px就相当于实际屏幕宽度0.5px
          // 所以在实际px书写时，是需要将测量的设计稿宽度乘以比例0.5，rem就正好符合，将html的字体大小设置为0.5px即可
          var a = b.getBoundingClientRect().width;
          // 乘以100是将比例放大100倍，因为浏览器规定字体大小不得小于12px，避免12px以下的字体不显示
          b.style.fontSize = (a / 750) * 100+ "px";
      }, 
      c = null;
      window.addEventListener("resize", function () {
          clearTimeout(c);
          c = setTimeout(a, 300);
      });
      a();
})();

注意：rem适配在项目初期就需要定，单位使用时直接使用rem，比如ui图的宽在1920，使用时则为19.20rem rem做为单位时，只有在页面刷新完，根据新的比例去设置跟标签的字体大小，并不能实时改变