跳到主要内容

认识

2025年01月14日
柏拉文
越努力，越幸运

一、认识​

在进行 前端响应式设计 时，使用 rem 和 vw 作为单位是一种非常流行的适配方式，尤其是在移动端适配中。这两种单位的核心特性是 相对于视口大小（vw） 或 根元素字体大小（rem） 来动态调整元素的尺寸，从而适应不同的设备屏幕。

二、VW​

vw（Viewport Width）：相对于视口宽度的百分比单位。1vw 等于视口宽度的 1%。适用于流式布局，尤其在响应式设计中，用于根据设备宽度调整元素大小。适配思路为: 将 px 转化为 vw 即可。 转换单位的计算规则为: targetValue(最终要在代码中写的 vw 值) = UI 稿元素（尺寸、字体大小等） / UI 稿宽度 * 100（100vw 始终为屏幕尺寸）

三、Rem​

rem（Root Em）：相对于根元素 (<html>) 的字体大小。适配思路为: 将 px 转化为 rem 后, 通过 动态调整根元素的字体大小 来动态改变页面布局。动态调整根元素字体大小的计算规则为: htmlFontSize = clientWidth / uiWidth * postcssRootValue

  • htmlFontSize: 最终的根字体大小, 它根据屏幕宽度与设计稿宽度的比例乘以我们固定的除数来计算。

  • clientWidth: 屏幕宽度

  • uiWidth: UI 稿宽度

  • postcssRootValue: 换算单位时的除数, 比如我们为了方便计算，规定 1rem = 100px，当 UI 稿某个元素为 400px 时, 那就在代码中换算成 4rem 即可。