实现
与 rem 类似做法，直接使用postcss-px-to-viewport 插件进行配置, 配置方式也是和 postcss-pxtorem 大同小异
我们看看插件的原理是不是也是一样的
function createPxReplace(opts, viewportUnit, viewportSize) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels <= opts.minPixelValue) return m;
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
};
}果然呢，连方法名、变量名、代码逻辑，都一摸一样哈哈哈，谁抄谁，我就不指出来啦 – –
其他解决方案
| 方案 | 缺陷 | |
|---|---|---|
| 1 | 百分比 | 高度无法百分比 |
| 2 | 媒体查询 + meta 中 viewport | 不同设备宽度不同，缩放比无法完全确定 |
| 3 | flex | 还是无法解决宽度超出问题 |
上面方案均存在致命缺陷，不推荐使用它完成移动端布局计算。
flex 与 rem 结合使用更佳
兼容性
上述两种方案， 兼容性主要在于 rem，vh，vw 关键词上
rem 在移动端表现高达 100%，令人惊叹！
vh vw表现还是比较令人满意，低版本的 safari 情况下会有兼容性问题，但不影响它会成为一种比较好的移动端布局解决方案。开源库解决方案
vant 组件库
vant 组件库中，默认采用
px 做计量单位，如果需要使用
rem ，直接使用插件完美适配。对于
vw 方案，vant 也是可以通过插件将
px 转成
vw ，对于
vw 可能会存在一些坑点。ant-design-mobile 组件库
ant-design-mobile 组件库仍然使用
px 单位
@hd: 1px; // 基本单位// 字体尺寸
// ---
@font-size-icontext: 10 * @hd;
