问题要点

• 1、不同终端设备 dpr 值不同，如：dpr=1 的安卓手机和dpr=3 的iphoneX手机，页面显示不一致问题
• 2、物理像素、设备独立像素、设备像素比
• 3、px、em、rem

技术要点

• 1、手机中的像素是什么？所有的画面都是由一个个的小点组成的，这一个个的小点就称之为像素。一块方形的屏幕横有多少个点，竖向有多少个点，相乘之后的数值就是这块屏幕的像素（数码相机的像素也是这么乘积出来的）
• 2、物理像素？一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值
• 3、设备独立像素？设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素
• 4、设备像素比？设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。（设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向 在javascript中我们可以通过 window.devicePixelRatio 获得）
• 5、px？像素（Pixel）绝对长度单位。像素px是相对于显示器屏幕分辨率而言的
• 6、em？相对长度单位。相对于当前对象内文本的字体尺寸（多层嵌套会越来越大）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
• 7、rem？是CSS3新增的一个相对单位（root em，根em，相对于根）

rem 设置

• 1、设定根的px值

html, body {font-size: 16px;}

• 2、px转rem（div 宽度500，如果div 宽度变成了600，又得再计算一次，工程化非常不友好）

500 / 16 = 31.25rem

• 3、postcss-pxtorem
  • 1、创建一个 rem.js 文件，根据不同的 dpr 修改 根的 font-size 然后将 rem.js 引入 main.js 中
  • 2、安装 postcss-pxtorem
  • 3、创建配置文件 .postcssrx.config.js (虽然官网上还有个 .postcssrx.js 但是我在项目中未使用，所以暂时不说,但权重 .postcssrx.js > postcss.config.js )

// rem.js 设置 rem 函数
let width = document.documentElement.getBoundingClientRect().width; // 获取宽度
function setRem () {
  let orientation = window.matchMedia("(orientation: portrait)");
  function onMatchMeidaChange (orientation) {
    if (orientation.matches) {
      // 竖屏
      width = document.documentElement.getBoundingClientRect().width; // 获取竖屏宽度
      setTimeout(() => {
        // 重新计算竖屏宽度rem
        autoRootFontSize()
      });
    } else {
      // 横屏
      width = document.documentElement.getBoundingClientRect().width; // 获取横屏宽度
      setTimeout(() => {
        // 重新计算横屏宽度rem
        autoRootFontSize()
      });
    }
  }
  onMatchMeidaChange(orientation);
  orientation.addListener(onMatchMeidaChange);

  /* 计算rem */
  function autoRootFontSize () {
    // (当前屏幕宽度 || 默认最小宽度为1200) / 1920 * 16px ==> pc 1920 设计稿
    let setSize = Math.max(document.documentElement.getBoundingClientRect().width, 1200) / 1920 * 16;
    // (当前屏幕宽度 || 默认最小宽度为750) / 750 * 16px ==> 移动端 750 设计稿（适配 pc 默认居中750）
    // let setSize = Math.max(document.documentElement.getBoundingClientRect().width, 750) / 750 * 16;
    // 字体默认最大值为16px
    document.documentElement.style.fontSize = (setSize > 16 ? 16 : setSize) + 'px';
  }
  window.addEventListener('resize', autoRootFontSize);
  autoRootFontSize();
};

window.onresize = function () {
  setRem();
}

// main.js 引入
import './common/scripts/rem';


// 配置文件 .postcssrx.config.js
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": {
      viewportWidth: 1920, // (Number) The width of the viewport.
      viewportHeight: 1024, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'rem', // (String) Expected units.
      selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
      propList: ['*']
    }
  }
}

• 4、开发正常编写对应 px，实际浏览器就会转译为 rem

• 5、

详情参考 https://zhuanlan.zhihu.com/p/166520794