WenSen博客

一、 历史方案：Rem + Flexible

早期由淘宝团队提出的方案，通过 JS 动态设置 html 的 font-size，配合 rem 单位。这种方案在高清屏下解决了 1px 边框问题，但依赖 JS，存在加载闪烁。

二、 现代方案：Viewport 单位 (vw/vh)

现在浏览器兼容性已经很好，可以直接使用 vw 单位。

/* 设计稿 750px，100px 宽的元素 */
.box {
    width: 13.333vw; /* 100 / 750 * 100 */
}

配合 PostCSS 插件 postcss-px-to-viewport，我们在代码中直接写 px，打包时自动转为 vw，开发体验最佳。