不要再用js设置rem了，现代css自适应方案来了

不要再用js设置rem了，现代css自适应方案来了

在移动端适配过程中，许多人倾向于使用 rem 单位，通过动态设置 html 元素的 font-size，以实现页面自适应。rem 表示 root em，页面中的所有值都是基于 html 的 font-size 进行相对变化。然而，随着智能手机的普及，固定设备尺寸的设计不再可行，需要考虑响应式设计，以适应不同浏览器窗口大小的布局。

在 CSS 中，单位分为绝对单位和相对单位。绝对单位包括 px、mm、cm、in、pt、pc，它们可以相互转换。最常用的相对单位是 em 和 rem。1em 等于当前元素的字号，常见值为 16px。在设置 padding、height、width、border-radius 等属性时，使用 em 可以动态根据 font-size 调整。

使用 em 时，需要注意其计算的复杂性。em 的值基于当前元素的 font-size，因此给当前元素设置 font-size 使用 em 时，需要考虑继承的字号。如果设置了 padding 的值为 2em，虽然 font-size 和 padding 都是 2em，但它们的值不同，因为它们基于不同的基础字号计算。这增加了计算的复杂性，所以通常给 font-size 设置固定值，以避免层级嵌套导致的预期结果不符。

为了提供更好的自适应体验，rem 单位应运而生。rem 是 root em 的缩写，表示相对于根元素的 font-size。这意味着在任何位置使用 rem 单位，都始终是基于根元素的字号。这样简化了自适应设计过程，使得页面在不同设备和窗口尺寸下都能保持一致的外观。

虽然 rem 单位提供了便利性，但在实际项目中，选择使用 rem、em 还是 px 应考虑具体场景。rem 通常用于设置 font-size，em 用于大多数属性的相对设置，而 px 则用于设置边框等绝对尺寸。这样可以确保页面在不同设备上的缩放和适配更加灵活和可控。

使用 JS 设置根元素的 rem 单位，可以动态调整页面布局以适应屏幕尺寸的变化。这种方法通过将网页的根元素字号根据屏幕大小设置为固定值，并在页面中根据 UI 图纸进行 rem 值转换，实现各种适配效果。尽管这类操作带来了一定的便利性，但也存在一定的局限性和问题。

实际应用中，使用 rem 和相对单位如 vw、vh 可以实现更灵活的响应式设计。例如，使用 50vh 可以设置元素的高度为视口高度的一半。结合媒体查询调整根元素的 font-size，当页面宽度变化时，元素的尺寸自然过渡，提供更好的用户体验。使用 calc 函数可以对多个值进行运算，确保在不同屏幕尺寸下保持合适的字号和布局。

综上所述，现代 CSS 提供了更灵活、易于维护的自适应方案，取代了传统的 JS 设置 rem 方法。通过合理使用 rem、em、vw、vh 和 calc 等相对单位，开发者可以构建出适应不同设备和窗口大小的响应式页面，提供更好的用户体验。2024-10-26