Question

例如，如果我有：

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不再支持访问者。

这在概念上看起来如此简单，我觉得答案正在盯着我，但我一直在对着这个问题磕磕碰碰一段时间，无法在任何地方找到答案。

请帮忙！此时，如果有人告诉我无法完成并且可以继续使用像素值，我会很高兴地相信它们！

Answer 1

使用rem单位可以实现您的目标。

rem是相对em s，它们的计算基于body元素上声明的font-size。

复合问题就会消失。

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

注意： IE8需要px回退，但这不是问题，因为您已经在使用预处理器。

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

Answer 2

我会回答与我的问题相同的问题，使用Pixels！

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

过去，以像素为单位声明的字体不会在IE中调整大小，这对于某些人来说非常烦人，如果用户故意选择以较低的分辨率查看，例如出于视力原因，那就不太容易访问 - 这就是“ em是最好的字体“事情来自，但这从来都不是真的IE可能会被百分比挫败，而后者提供相同的问题;）..我记得当时尚为”青少年文本“时，我感到恼火，但随后的喜悦在非ie中发现CTRL +，无论如何现在像素大小的字体将完美地扩展，如果你正在建立一个流体网站，你可以用宽度和字体大小的像素混合构建它 - 如果它看起来不错在你的分辨率下尝试放大它，无论是上下 - 你必须在它变得难以辨认之前走得很远，并且除了设计师之外谁会把它放大很远/更低;）

Answer 3

您是否考虑过在表格单元格中添加一个类？我认为，额外的特异性水平会超越级联风格相互复合的效果。

复合相对字体大小：采用子元素字体大小的简洁方法，而不是父元素

3 个答案: