【Q669】在 CSS 中，使用 rem 作为单位有何缺点

[illumi520]

1.a11y可访问性不友好,不跟随系统字体

[shfshanyue]

TODO

[heretic-G]

不支持iframe 而且有一个理念问题 大屏是为了更大更清晰还是为了承载更多内容

其实这也是现在很多舍弃rem的原因 1:1还原之后 你希望pad也和手机一样？ 大屏手机也和普通手机一样？ 这个我觉得你体验过其实会发现这里其实不是一个好的展示逻辑

还有一个找到的 但是没有实际踩过得坑 就是在很高的高倍屏上rem会有展示问题 但是我没遇到过...

[youngboo]

1. 初始计算成本:

   • 当使用 rem 作为单位时，浏览器必须先确定根元素 (html) 的字体大小，然后才能计算出所有使用 rem 的元素的实际尺寸。这意味着在渲染树构建过程中需要进行额外的计算。

2. 动态字体大小调整的影响:

   • 如果用户更改了浏览器的默认字体大小设置，或者网站使用 JavaScript 动态调整了根元素的字体大小，那么使用 rem 的元素的尺寸也会相应变化。这种动态变化可能会导致布局不稳定或视觉上的闪烁现象（FOUC, Flash of Unstyled Content）。

3. 兼容性问题:

   • 虽然现代浏览器普遍支持 rem 单位，但在一些较旧或非常规的浏览器中可能存在兼容性问题。不过这种情况相对较少见，大多数情况下 rem 的兼容性是非常好的。

4. 调试难度增加:

   • 当页面中大量使用 rem 时，对于不熟悉 rem 单位的人来说，调试布局可能会变得更加困难，特别是当涉及到复杂的嵌套和响应式设计时。

5. 过度依赖于比例计算:

   • 过度依赖 rem 可能会导致布局变得过于复杂，尤其是在需要精确控制间距或尺寸的情况下。此外，如果根元素的字体大小发生改变，整个页面的布局都需要重新计算，这可能会导致布局的不可预测性。

6. 初始加载性能:

   • 如果根元素的字体大小是通过外部样式表或脚本动态设置的，那么浏览器需要等待这些资源加载完成才能开始渲染页面。这可能导致首屏渲染延迟。

7. 与其他单位混合使用的问题:

   • 当 rem 与像素等固定单位混用时，可能会引入一些难以追踪的布局问题。例如，如果一个元素的宽度使用 rem 定义，而其子元素的宽度使用像素定义，那么随着根元素字体大小的变化，子元素可能会出现布局问题。