前言

前面介绍了如何适配移动端页面，常规做法是设置 meta viewport 并为移动端专门设置一套 UI。
但是，移动端设备有很多，比如 iphone、华为、小米、三星、oppo、vivo 等等，并且同一个品牌的手机的不同型号设备尺寸也不一样。
那在写移动页面的时候，总不能针对每一个设备型号做一套 UI 吧。
常规情况有以下两种处理方式：

  1. 严格按照 UI 尺寸开发，在不同设备页面内容大小展示一样。
  2. 不固定 UI 尺寸，在和 UI 尺寸不同的设备上等比放大。

很显然第二种要好一些。否则可能会出现在很大屏幕的移动设备上内容很小空白很多的情况。

那么第二种的具体做法有哪些呢？

  1. 使用 vw 。（缺点是 vw 兼容性不好）
  2. 单位都使用百分比。（缺点很明显，当宽高需要设置一样的时候，无法设置，因为高度无法获取宽度）
  3. 利用 rem 是根元素字体大小的特点，将 rem 设置成设备宽度，后面的元素都以 rem 为单位。

1 rem === html font-size === viewport width

使用 JS 动态调整 rem

  1. <script>
  2.   const pageWidth = window.innerWidth;
  3.   document.write(`<style>html { font-zie: ${pageWidth}px; } body { font-size: 16px; }</style>`)
  4. </script>
  1. .test {
  2.   width: 0.1rem; // 即 10% 的设备宽度。
  3. }

使用 scss 定义 px2rem 函数

前面那种写法，需要计算当前 px 数值换算成 rem 的单位，不仅繁琐，而且带有小数不好看。
因此可以使用 scss 这种高级 css 语法，经过编译后自动帮我们计算。

  1. $designWidth: 640; // designWidth 是移动端设计稿的宽度。
  3. @function px( $px ) {
  4.   @return $px / $designWidth + rem;
  5. }
  7. .test {
  8.   width: px(160);
  9.   margin: px(40) px(60);
  10. }