移动端响应式 style 记录（二）

前情回顾

本文接着之前写的一篇关于移动端响应式布局的文章，感兴趣可以看这里。

后面觉得基于屏幕宽度计算 font-size 的方法还是不太好，一是因为繁琐，增加了理解成本（心智负担），而是由于用 js 计算，可能阻塞渲染，而且如果页面变化（resize）不及时页面显示就会有问题，所以还是得用别的办法。

曙光初现

在一位同事的介绍下，发现了一个巨简单 的方法，有多简单呢？

只需要在 html 中加（改）一行代码就行了。

<meta name="viewport" content="width=584" />

没错，就是上面这行代码，关键就是 content 的值中，width 设置为了固定宽度（px），可能平时我们使用比较多的场景是像下面这样用来控制视口宽度设置为设备宽度和缩放相关。

<meta
  name="viewport"
  content="width=device-width,initial-scale=0.8,user-scalable=yes"
/>

这里放一个 MDN 关于 meta 标签的介绍

如果想马上看一下效果，这里也有一个 demo

这样页面渲染时就会把视口宽度设为固定的宽度，所以我们样式里就可以直接写设计图上的宽度了（meta 标签 width 也需要和设计图保持一致）。

本来到这里就结束了，但是测试时发现这个特性只在 PC 端才生效，移动端并不支持。。。。所以我不得不放弃这个方案。。。

最终方案

上面最简单的方案不能使用，就必须想别的办法了。。。在同事们的集思广益下，我最终决定使用 vw 这个百分比单位，项目使用了 less，可以使用 less 函数计算出 vw 的值。

// plugin.js
module.exports = {
  install: function (less, pluginManager, functions) {
    // 横屏
    functions.add("vw-l", function (param) {
      return (Number(param.value) / 584) * 100 + "vw";
    });
    // 竖屏
    functions.add("vw-p", function (param) {
      return (Number(param.value) / 336) * 100 + "vw";
    });
  },
};

// index.less
@import (reference) "./plugin";

这样就定义了两个 less 的方法：vw-l 和 vw-p。

用法：

.xxx {
  width: vw-l(584px);
}

这样最终会生成下面的样式：

.xxx {
  width: 100vw;
}

这样就还是用设计图上面的宽度，最终生成 vw 的数值，而计算则通过 less 的在构建时实现，不用自己计算。

可能你已经注意到了上面第二个方法时针对竖屏的，这是因为我这个项目有竖屏和横屏两种样式。做法都是一样的，竖屏可以通过媒体查询判断：

.xxx {
  width: vw-l(584px);
}

@media (orientation: portrait) {
  .xxx {
    width: vw-p(336px);
  }
}

这样虽然不如上面方法简单，但是相比一开始方案，省去了 js 计算和监听窗口变化的部分，就是最简单的 css 代码。