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

我在学习CSS，并在StackOverflow上阅读关于相对vs绝对字体大小的问题。我遇到了两个线程。相对字体大小棘手的子元素？

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

问题，许多在这里说，铂仅用于打印。但是，如果没有记住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大小已经结束。那么为什么不使用铂？浏览器差异有多大？

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

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

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

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

可以显而易见，我的问题是什么现在... 是否有使用相对字体大小（或任何相对规模 - 像宽度，高度，等等 - 对于这个问题）一个更好的办法，而不子元素受父元素影响？

来源

2012-01-12 its_me

简短的回答 - 不，这不是CSS的工作原理。

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

我已经看到了一些人使用（包括达恩·塞德霍姆在他的书中防弹CSS，我建议）的技术，是make the base font size equivalent to 10px，而不是处理16像素的典型默认的基本字体大小。我不知道它会对您的示例设计有多大帮助，但它可能有助于整体处理基于em的字体。

我还发现this article上百分比和基于em的字体大小之间的差异。这有点旧，但百分比和em之间的比较仍然有效。这就是说，现代浏览器会缩小整个页面，因此除非您必须支持IE6，否则您可能能够脱离使用像素字体大小，特别是如果您的设计真的需要如此复杂（因为如果您它嵌套了许多元素，并具有许多不同的字体大小，可能有更好的方法来设计它）。

此外，作为@ JukkaK.Korpela说，表不含有正常标题标签，这是什么<日>和<THEAD>元素是。

来源

2012-01-12 14:52:27 Shauna

在CSS中使用太多的相对字体大小意味着页面加载速度较慢（至少与使用绝对值相比），因为它们需要更多的处理才能完成？ – 2012-01-12 15:03:43

从技术上来说，它的加载速度可能会比较慢，但计算机的计算速度会过快，除非数千次这么做，否则它不会起作用。你最大的问题是a）可维护性（记录实际尺寸）和b）总体设计（当尺寸或颜色只有一些变化时，大多数设计是最有效的）。编写代码以使用HTML最佳实践可能会对使用ems和像素的负载速度产生较大影响。 – Shauna 2012-01-12 16:29:37

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

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

来源

2012-01-12 14:45:45

所以，从某种意义上说，太多的相对字体大小在CSS手段，页加载速度缓慢（至少与使用绝对值相比），因为它们需要更多处理才能完成？是对的吗？ – 2012-01-12 14:53:27

@ Kr1s，我不认为效率问题是相关的。我指的是*创作*中的计算，即如果嵌套元素具有其自己的字体大小设置，作者需要进行一些计算以找到合适的因子。 – 2012-01-12 15:01:28

方框2 是恰好1.2em，但它不一定是1.2 rem。

rem几乎相同em，但它是对CSS3的一部分，并且它是... (from the docs)

等于“字体尺寸”的根元素所计算的值。

当在根元素的'font-size'属性上指定时，'rem'单位指向属性的初始值。

来源

2013-08-09 01:52:14 uber5001

对于字体大小，我可以想象的一种方式是通过指定字体大小尽可能接近要设置字体大小的元素，也可能需要引入其他字体元素来绕过嵌套规则。

例如，对于您的代码有问题，对于每一段文本用span展开，然后在span上设置字体大小。由于这些跨度没有嵌套，所有的字体大小是相对于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>

来源

2017-07-27 03:42:02 davenkin

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

回答

相关问题