字体大小 1px 与 rem 单位一起使用
我正在追求一种可以随着缩放而很好地缩放的布局（用户按 ctr/cmd + [plus]）。为此，我需要尺寸与字体大小一起缩放。使用 em 单位太棘手，所以我正在考虑使用 rem （并复制旧 ie 的每个维度属性）。
我最初的想法是将 html 元素上的 font-size 设置为 10px，然后使用 1/10rem 作为像素替换。但由于 body 上的 font-size 是以 px 为单位任意设置的，因此 html 上的 font-size 将专门用于 rem 测量。那么为什么不将其设置为 1px 呢？
优点是显而易见的——易于编写重复声明和可维护性。
至于缺点（除了重复声明之外）我想不出任何缺点。但也许我错过了一些东西。这种方法有什么陷阱吗？
I'm going after a layout that would scale nicely along with zoom (user pressing ctr/cmd + [plus]). For that I need dimensions to scale along with font-size. Using em units is too tricky, so I'm thinking of going with rem (and duplicating every dimensional property for old ie).
My initial idea was to set font-size on html element to 10px and then use 1/10rem as a pixel replacement. But since font-size on body is set arbitrary in px, the one on html would be used exclusively for rem measurement. So why not set it to 1px?
The advantages are obvious - ease of writing duplicated declarations and maintainability.
As for disadvantages (apart form duplicating declarations) I can't think of any. But maybe I'm missing something. Are there any pitfalls in this approach?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于您已经在正文中定义了可继承的字体大小，因此您可以安全地根据需要更改 html 字体大小。目前，这仅影响 rem 值，但如果其他东西使用该值，那么这个 1px 非标准配置将破坏其他东西并且难以修复。
这可能会对使用 rem 的第三方库产生影响，并且互换使用 em 和 rem 可能会造成一些混乱。
我个人认为，如果使用普通 CSS（无预处理器），使用这种非标准方法可以大大简化 rem 的使用，因为 1:1 rem:px 值非常直观。
Since you've defined an inheritable font-size in your body, you're safe to change the html font-size as you see fit. Currently, this only affects rem values, but if something else utilizes this value, then this 1px nonstandard config will break something else and be difficult to fix.
This may have an impact on 3rd party libraries utilizing rem, and some confusion may come from using em and rem interchangeably.
Personally I think, if working with vanilla CSS (sans preprocessor), using this nonstandard method greatly simplifies the use of rem as 1:1 rem:px values are extremely intuitive.
正如您所说，由于您仍然需要以其他方式为 IE 做事情，所以我认为该方法没有任何可能的好处。只需使用 em，即使它需要一些计算。如果您有深度嵌套的元素及其自己的字体大小设置，那么无论如何它都太复杂并且需要简化，而不是复杂化。
设置 font-size: 1px 非常不自然，并且会使样式表难以阅读和维护。
As you would still need to do things some other way for IE, as you say, I don’t see any possible benefit in the approach. Just use em, even if it requires some computations. If you have deeply nested elements with their own font-size settings, it’s all too complicated anyway and needs simplification, not complication.
Setting font-size: 1px is highly unnatural and would make your stylesheet hard to read and maintain.