移动端适配方案之结合rem&vw

[HexMox]

这个是老生常谈的问题了，只要你开发过移动端就一定会遇到各种大小屏幕的适配问题。随便google了一下移动端适配方案，一堆现有的文章总结，那为何要再写一篇这样的文章呢，因为看了一下好几篇总结都没提到rem和vw结合的方案，最近试了一下这种方案感觉不错记录一下。

业务主流适配方案

目前业界主流的移动端适配方案应该就以下几种：

• px + %

以较小宽度（如320px）的视觉稿做参考，垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终达到“当手机屏幕变化时，横向拉伸或者填充空白的效果”。

• media query

• viewport缩放

• rem

• vw/vh

就不一一具体解释了，相关解释可以看文章末尾的参考链接。

不太完美的效果

团队一直以来适配的方案都是rem，近来用户机型统计数据兼容vw的越来越大，故而可以尝试vw了，这里给出实践效果。

vw

// postcss.config.js
module.exports = {
  parser: 'postcss-scss',
  plugins: {
    // ...其他插件
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore-vw'],
      minPixelValue: 1,
      mediaQuery: false
    }
  }
};

其实这个就是等比例缩放适配，精准还原视觉稿的效果。

可以看到大屏（ipad）可显示的内容更少了，这是设计不能接受的。

rem + media query（当然结合JS计算也是可以的）

// postcss.config.js
module.exports = {
  parser: 'postcss-scss',
  plugins: {
    // ...其他插件
    'postcss-pxtorem': {
      rootValue: 14,
      unitPrecision: 5,
      propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
      selectorBlackList: [
        'html',
        '.download-wording' // app引导高度固定
      ],
      replace: true,
      mediaQuery: false,
      minPixelValue: 1
    }
  }
};

html {
  @media only screen and (max-width: 340px) {
    font-size: 12px !important;
  }

  @media only screen and (min-width: 340px) {
    font-size: 14px !important;
  }

  @media only screen and (min-width: 600px) {
    font-size: 16px !important;
  }
}

这边注意看到postcss-pxtorem插件配置中有一个propList属性，仅仅对部分文本相关的CSS属性做px到rem单位的转换，否则如果所有都转换的话本质上跟vw没区别，都是等比例缩放。那么效果看起来也还行：

但是这就对开发者的编码意识提出了要求，比如以下场景：

可以看到顶部离封面图中间是存在灰线的，这个是因为底部容器margin-top写死px没有被转换成rem的缘故。还有左右容器高度对齐实现不一致，一个用height，一个用line-height撑开也会出现适配问题等等。

结合rem&vw

既然上面两个方案都有各自的问题，那么我们可不可以结合他俩呢，把html的font-size设置成vw单位，然后用媒体查询设置一个最小和最大值，自动把所有px转rem。

看起来效果不错的样子：

参考：

• MobileWeb 适配总结
• 简单粗暴的移动端适配方案 - REM
• rem不是神农草，治不了移动端百病