复合相对字体大小：一种采用子元素而不是父元素的字体大小的干净方法
例如，如果我有：
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 似乎不再支持访问器了。
这在概念上看起来很简单，我觉得答案就在我面前，但我已经为此苦苦挣扎了一段时间，但在任何地方都找不到答案。
For example, if I have:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
And I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:
td h2, td h3, td p { font-size: 1em }
Which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).
But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.
I'd really like to avoid doing the following (and of course I'd like to avoid using 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
For anyone familiar with LESS, I'm using that, and thought I should be able to use it to do the calculations for me, e.g. Using accessors:
td h2 { font-size: h2['font-size'] / td['font-size'] }
This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.
This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你想要的可以通过使用
rem单位来实现。rem 是相对的 em ，其计算基于 body 元素上声明的字体大小。
复杂的问题就会消失。
http://snook.ca/archives/html_and_css/font-size-with-rem 是一篇很好的文章来阐明这一点。
注意： IE8 需要
px后备，但这不会成为问题，因为您已经在使用预处理器。编辑：我编写了一个 Sass mixin，它输出
rem以及大多数 CSS 属性各自的px后备：https://gist.github.com/larrybotha/4153104
What you want can be achieved by using
remunits.rems are relativeems which base their calculations on the font-size declared on the body element.Compounding issues simply disappear.
http://snook.ca/archives/html_and_css/font-size-with-rem is an excellent article to articulate this.
note: IE8 requires a
pxfallback, but this won't be an issue since you're already making use of a preprocessor.EDIT: I've written a Sass mixin which outputs
rems with their respectivepxfallbacks for most CSS properties:https://gist.github.com/larrybotha/4153104
我会回答与我的问题相同的问题，使用像素！
像素是一个相对单位，它是相对于屏幕分辨率而言的，用户可以设置自己想要的最小像素大小，并且缩放缩放像素。我敢说，对于设计师来说，在每个可感知的分辨率下近似非像素字体大小比放松并让浏览器工具来处理它更困难？
过去，以像素为单位声明的字体不会在 IE 中调整大小，这对某些人来说非常烦人，如果用户出于视力原因故意选择较低的分辨率查看，则不太容易访问 - 这就是“em”最好的地方字体”的事情来自，但这从来都不是真的，IE 可以使用百分比来挫败，然后带来同样的问题;)..我记得当流行“小文本”时我很恼火，但后来发现 CTRL+ 的乐趣在非IE中..无论如何，现在像素大小的字体将完美地缩放，如果您正在构建一个流体站点，您可以使用em的宽度和像素的字体大小的混合来构建它 - 如果它在您的分辨率下看起来不错尝试向上和向下缩放它 - 在它变得难以辨认之前，你必须向上或向下移动很远，除了设计师之外，还有谁将它向上/向下缩放得那么远；）
I'll answer the same as my question, use Pixels!
A pixel is a relative unit, it's relative to the screen resolution, users can set their own desired minimum pixel size, and zoom zooms pixels. I'd venture that it is more difficult for a designer to approximate non pixel font-sizes at every perceivable resolution than it is to relax and let the browser tools take care of it?
It used to be that a font declared in pixels wouldn't resize in IE which was very annoying for some, not very accessible if a user deliberately chose to view on a lower resolution for instance for eyesight reasons - that's where the "em's were best for fonts" thing came from, but that was never true IE could be foiled using percentages instead which then offers the same problems ;).. I remember getting annoyed when the fad was for "teeny text", but then the joys of discovering CTRL+ in non-ie .. anyway now the pixel sized fonts will scale perfectly well, if you're building a fluid site you can build it with a mixture of em's for widths and pixels for font-sizes - if it looks OK at your resolution try zooming it, both up and down - you have to go pretty far up or down before it becomes illegible, and who's zooming it that far up/down except designers ;)
您是否考虑过向表格单元格中的标题添加一个类？我认为，额外的特异性会覆盖层叠样式相互复合的效果。
Have you considered adding a class to the headings that are in table cells? The extra level of specificity would override the effect of the cascading styles compounding each other, I think.