复合相对字体大小：采用子元素而不是父元素的字体大小的干净方法答案

【问题标题】：Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element复合相对字体大小：采用子元素而不是父元素的字体大小的干净方法
【发布时间】：2019-09-12 02:01:26
【问题描述】：

例如，如果我有：

td { font-size: 1.3em }

h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }

我的表格单元格中有标题/段落，我知道我可以通过以下方式避免混合字体大小：

td h2, td h3, td p { font-size: 1em }

这将导致我的表格单元格中的标题/段落的字体大小为 1.3em（td 的字体大小）。

但我正在寻找的是一种很好、干净的方式，让每个子元素都拥有原始字体大小，而不是父元素。

我真的很想避免做以下事情（当然我想避免使用 px）：

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

对于熟悉 LESS 的任何人，我正在使用它，并且认为我应该能够使用它来为我进行计算，例如使用访问器：

td h2 { font-size: h2['font-size'] / td['font-size'] }

这至少会使用原始值进行计算，但感觉和上面一样笨拙，此外，似乎 LESS 不再支持访问器了。

这在概念上似乎很简单，我觉得答案在盯着我看，但我一直在努力解决这个问题，但在任何地方都找不到答案。

【问题讨论】：

好吧，我会告诉你使用像素;) - 它是一个相对单位，就像 em，你为什么觉得你不能使用它们？
px 会带来可访问性问题（无缩放），并且比使用相对单位（例如 rems）更难维护。

标签： css nested font-size

【解决方案1】：

使用rem 单位可以实现您想要的。

rems 是相对的 ems，它们的计算基于 body 元素上声明的字体大小。

复杂的问题就会消失。

http://snook.ca/archives/html_and_css/font-size-with-rem 是一篇很好的文章来阐明这一点。

注意： IE8 需要 px 后备，但这不会成为问题，因为您已经在使用预处理器。

编辑：我编写了一个 Sass mixin，它为大多数 CSS 属性输出 rems 以及它们各自的 px 后备： https://gist.github.com/larrybotha/4153104

【讨论】：

【解决方案2】：

我会和我的问题一样回答，使用像素！

像素是一个相对单位，它是相对于屏幕分辨率的，用户可以设置自己想要的最小像素大小，zoom缩放像素。我敢说，设计师在每个可感知的分辨率下近似非像素字体大小比放松并让浏览器工具处理它更困难？

过去，以像素为单位声明的字体不会在 IE 中调整大小，这对某些人来说非常烦人，如果用户出于视力原因故意选择以较低的分辨率查看，则不是很容易访问 - 这就是“ em 最适合字体”的东西来自，但这从来都不是真的 IE 可以使用百分比来挫败，然后提供相同的问题 ;).. 我记得当时尚是“小文本”时我很生气，但随后的乐趣在非 IE 中发现 CTRL+ .. 无论如何，现在像素大小的字体可以很好地缩放，如果您正在构建一个流畅的网站，您可以使用 em 的宽度和像素的字体大小混合构建它 - 如果它看起来不错以您的分辨率尝试上下缩放它 - 在它变得难以辨认之前您必须向上或向下移动很远，除了设计师之外，谁在向上/向下缩放它;）

【讨论】：

感谢 clairesuzy，这是个好消息！
这是一个糟糕的建议。当您说 屏幕分辨率 时，您可能指的是 桌面尺寸（例如 1600×1200px）。您完全无视 每英寸点数 设置（例如 120dpi），而且我什至不是在谈论现代 Retina 显示器——该功能已经存在多年。即使所有不错的浏览器都有不错的缩放，默认情况下以像素设置的字体在高分辨率显示器中看起来很小。您可能会说第一印象并不重要，用户无论如何都可以缩放，但是，您可以只使用pt 并忽略浏览器之间的微小差异。
不幸的是，px 不是相对的——它们是固定的。 em 和 rem 是相对的，因为它们是根据父/祖父/根元素的值计算的。 Rem 的额外好处是它们不会复合，您可以在单个声明中修改整个文档的字体大小 - 例如在正文选择器上。使用 px 会影响可访问性（无缩放）并且是维护的噩梦。

【解决方案3】：

您是否考虑过为表格单元格中的标题添加一个类？我认为，额外的特异性将覆盖级联样式相互混合的效果。

【讨论】：

与 ems David 不一样，他们无论如何都从父级继承（除非您将类设置为当然以像素为单位！）。它们，ems，与指定百分比相同，只要你指定一个百分比，它就会成为“什么”的“百分比”，即“什么”将是父级的现有（计算）字体大小