相對字體大小棘手的子元素？

我在學習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

相對字體大小棘手的子元素？

回答

相關問題