Question

我正在学习CSS，并在StackOverflow上阅读有关相对与绝对字体大小的问题。我遇到了两个主题。

1。在一个帖子（CSS font size: relative vs. absolute values. Which to use?）中，其中一个答案实际上是一个尚未回答的问题：[QUOTE]

问题，很多人在这里说Pt仅用于打印。但是如果没有记住DIV具有什么样的Em或％值，那么拥有一个简单的能力使文本成为你想要的大小并不是很好。例如，当你有：

<body>
 <div id="box1">
   test text sample1
   <div id="box2">
     test text sample2
     <div id="box3">
       test text sample3
        <div id="box4">
          test text sample4
        </div>
     </div>
   </div>
</div>

我知道这是一种奇怪的结构，但是我们可以说布局需要一个类似于图形和CSS图像分层的结构。所以我想让box1 font = 100％，box2 = 1.2em。 box3 = .8em，box4 = 1.6em

现在，问题是来自方框1的Em也转移到它的所有孩子，如果我错了就纠正我，所以这意味着box2不完全是1.2em，当我们得到第4个字体大小时很难说它是什么。然而，当我们使用Pt或Px时，它会保持我们希望它保留的方式。

然而，Px尺寸不灵活，我喜欢在远离屏幕时在浏览器的菜单中使字体更大。让我们面对现实吧。所以Px尺寸已经出来了。那么为什么不使用Pt呢？浏览器的差异有多大？

2。另一个主题有相同的问题（Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element）与数字，计算 - 更多解释，没有正确的答案：

例如，如果我有：

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

简短的回答 - 不，这不是CSS的工作方式。

答案越长 - 您可能知道，CSS代表层叠样式表。该级联的一部分是子元素将继承其父元素的属性。

我见过许多人使用的技术（包括Dan Cederholm在他的书中提到的 Bulletproof CSS ），是make the base font size equivalent to 10px，而不是处理典型的默认基本字体大小为16px。我不知道它对你的示例设计有多大帮助，但它可能有助于整体使用基于em的字体。

我还发现this article关于百分比和基于em的字体大小之间的差异。它有点旧，但百分比和em之间的比较仍然有效。

也就是说，现代浏览器会缩放整个页面，因此除非您必须支持IE6，否则您可以使用像素字体大小，特别是如果您的设计确实需要那么复杂（因为如果你'重新嵌套那么多元素并拥有许多不同的字体大小，可能有更好的方法来设计它。）

另外，正如@ JukkaK.Korpela所说，表格通常不包含标题标签，这就是＆lt; th＆gt;和＆lt; thead＆gt;元素是为。

Answer 2

不，没有更好的方法来使用自适应（相对）字体大小，而不是将它们设置为相对于父元素的字体大小。原因是它们被设计成以这种方式工作。如果这意味着创作过多的计算，那么真正的原因可能是整体设计太复杂或者你使用的字体太多了。

通常，表格不包含标题，例如，除非您使用表格进行布局。有些人可能会说表布局是一个问题，但我宁愿说问题是设置表的字体大小。你不需要这样做;你可以设置表格内不同元素的字体大小，

Answer 3

第二栏 正好是1.2em，但不一定是1.2 rem 。

rem与em几乎相同，但它是css3的一部分，它是...... (from the docs)


等于根元素上'font-size'的计算值。

在根元素的'font-size'属性上指定时，   'rem'单位是指房产的初始价值。

Answer 4

对于font-size，我可以想象的一种方法是将font-size指定为尽可能接近要设置font-size的元素，并且您可能还需要引入一些其他元素。 - 通过嵌套规则。

例如，对于您的相关代码，对于每个文本用span填充它，然后在跨度上设置font-size。由于这些跨度不是嵌套的，所有字体大小都相对于box1，这里的结果是https://jsfiddle.net/davenkin/pLype465/：

<div id="box1">
<span id="span1">test text sample1</span>
<div id="box2">
    <span id="span2">test text sample2</span>
    <div id="box3">
        <span id="span3">test text sample3</span>
        <div id="box4">
            <span id="span4">test text sample4</span>
        </div>
    </div>
</div>

子元素的相对字体大小棘手？

4 个答案: