使用 vw 结合 scss / sass 超简单实现页面自适应 / 响应式布局

最近做大屏幕开发时需要把 1920px 的设计稿做成响应式布局，因为是要在同一个 Vue 项目里面同时实现移动端 + PC 端大屏幕的自适应，移动端的设计稿是 750px，大屏幕的设计稿则是 1920px，项目中默认使用了 750px 的淘宝 flexible.js的 rem 的自适应的解决方案，那么 PC 端大屏幕端呢？现需要同时实现 PC 端大屏幕端自适应。让 UI 把设计稿改为 750 是不可能的。之前就了解过 vw / vh 的自适应解决方案，但还未真正在项目中使用过，现终于可以派上用场了！因为是在 Chrome 上使用的，可以不用考虑各种 IE 兼容性。

解决思路主要使用 scss / sass 定义好函数，自动转 vw。把宽为 1920px 的设计稿定义为 100vw，然后在页面上直接调用函数就可以了。关键函数如下：

@function r($px) {
  @if $px==0 {
    @return 0;
  }

  @return $px / 1920 * 100vw;
}

页面上使用函数写样式，直接按设计稿的大小来写就可以了，scss 代码如下：

    .title {
      font-family: PingFangSC-Medium;
      font-size: r(30);
      color: #ffffff;
      padding: r(47) 0;
      text-align: center;
    }
    .box {
      width: r(200);
      margin: 0 auto;
      img {
        width: 100%;
      }
    }

完成，就这么简单，使用一个 r 函数就可以实现的页面自适应，百分百还原高保真，太爽了。这其中有些处理技巧，如果 vw 满足不了，页面还可以使用 vh 辅助处理高度的局部自适应，足以应付各种刁钻要求。