复利相对字体大小：领养孩子的字体大小干净的方式，而不是父元素

举例来说，如果我有：复利相对字体大小：领养孩子的字体大小干净的方式，而不是父元素

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'] }

这至少会使用原始值做计算，但感觉就像是笨拙以上，此外，似乎少了不再支持存取反正。

这在概念上看起来很简单，我觉得答案盯着我的脸，但我一直对我的头撞了一会儿，无法在任何地方找到答案。

请帮忙！在这一点上，如果有人告诉我，它不能完成，并且可以继续使用像素值，我会非常高兴地相信它们！

来源

2011-03-22 Karen Brooks

OK，我会告诉你用像素） - 这是一个相对单位，就像时间，你为什么觉得你不能使用它们？ – clairesuzy 2011-03-22 17:50:04

px的姿势可访问性问题（无缩放），并且比使用相对单位（如rems）要难得多。 – Larry 2013-04-18 13:05:18

您是否考虑过向表单元格中的标题添加类？我认为，额外的特异性水平会覆盖层叠样式相互混合的效果。

来源

2011-03-22 18:09:28

不是ems大卫他们从父母那里继承，不管怎么样（除非你把这个类设置为像素，当然！）。他们ems与指定百分比是一样的，只要你指定一个百分比，它就成为“什么”的百分比，这将是父母的现有（计算）的字体大小 – clairesuzy 2011-03-22 22:32:03

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

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

它曾经是一种以像素为单位声明的字体不会在IE中调整大小，这对一些人来说非常烦人，如果用户故意选择以较低分辨率为视觉原因而选择查看时不容易访问 - 那就是“em是最好的字体”的东西来自，但这是从来没有真正的IE浏览器可以挫败使用百分比，而是提供相同的问题;）..我记得当时尚是“小文本”，但后来恼火在非ie中发现CTRL +的乐趣......无论如何，像素大小的字体可以很好地缩放，如果你正在构建一个流体站点，你可以用em的宽度和像素的字体大小混合来构建它 - 如果它看起来像在你的分辨率下，尝试缩放它，无论是向上还是向下 - 在变得难以辨认之前，你必须变得非常高或低，并且除了设计师之外，谁的缩放比它高得多/高;

来源

2011-03-22 22:40:29 clairesuzy

谢谢clairesuzy，那太棒了新闻！ – 2011-03-23 09:23:02

这是一个糟糕的建议。当你说*屏幕分辨率时*你可能意味着*桌面尺寸*（例如1600×1200像素）。你完全忽视每英寸点数*设置（例如120dpi），我甚至没有谈论现代Retina显示器 - 这个功能已经存在很多年了。即使所有体面的浏览器都具有可观的缩放比例，但在高分辨率显示器中，默认情况下，以像素为单位设置的字体看起来会很小你可能会说第一印象并不重要，用户可以放大，但是，你可以使用'pt'并忽略浏览器之间的细微差异。 – 2013-04-17 12:16:32

不幸的是，px不是相对的 - 它们是固定的。 em和rem是相对的，因为它们是根据父/祖辈/根元素的值计算得出的。 Rem的额外好处是它们不会混合在一起，并且您可以在单个声明中修改整个文档的字体大小 - 例如在主体选择器上。使用px会影响可访问性（不缩放）并且是维护的噩梦。 – Larry 2013-04-18 13:01:04

想要什么可以通过使用rem单位来实现。

rem s是相对于em s，它们的计算基于在body元素上声明的字体大小。

复合问题简单地消失。

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

note： IE8需要一个px回退，但这不会成为问题，因为您已经在使用预处理器了。

编辑：我已经写了萨斯混入其各自的px回退输出rem S表示最CSS属性： https://gist.github.com/larrybotha/4153104

来源

2013-01-15 20:24:45 Larry

复利相对字体大小：领养孩子的字体大小干净的方式，而不是父元素

回答

相关问题