em單位和百分數有什麼區別？

我已經閱讀了很多關於這個主題的文章（並且搜索了Q & A），並且我發現了，但我仍然不明白em單位和百分比之間的區別是什麼。幫幫我？em單位和百分數有什麼區別？

P.S. 我已經看到了這個代碼示例：

p { font-size: 10px; } 
p { line-height: 120%; } /* 120% of 'font-size' */

那是什麼意思？爲什麼人人都想將行高設置爲字體大小的百分比值？

來源

2013-03-09 Or' el

爲什麼會有人想要設置行高*百分比值以外的任何*其他*？這樣，線條高度總是與字體高度成正比。 – JJJ 2013-03-09 13:43:14

嗯。也許我應該三思而後行。其他屬性呢？在那裏它不會那樣工作，對吧？ – 2013-03-09 13:44:37

他們是兩個不同的單位;他們有不同的定義。所以這個問題沒有什麼意義。你可能想問一些不同的東西，但你的代碼示例甚至不包含'em'單元。 – 2013-03-09 13:55:33

好的，所以我決定總結答案。

行高的百分比值是相對於當前的字體大小。
em單位始終與字體大小有關。
百分比取決於上下文。例如，如果它們用於字體大小，它們將與當前字體大小相關;如果它在高度上，它們將相對於高度。
當父標籤的字體大小被聲明爲「小」，「中」或「大」時，它會發生一些變化，因爲這些值受瀏覽器設置的影響。在此背景下1EM = \ = 100％，1EM似乎使設置多一點「小」或者多一點「大」比100％，讀到它here.

謝謝你，夥計們。 :)

來源

2013-03-11 13:02:39

行高通常是字體大小的倍數。事實上，這是對你沒有指定一個單元中唯一的值：

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

如果行高是成比例的字體大小，更容易調整字體，而不必擔心關於固定的線路高度。

來源

2013-03-09 13:45:10 Harmen

在這種情況下（'line-height'），值得注意的是，百分比和em單位大致相同。 1em = 1行高 – jrajav 2013-03-09 13:50:06

你是什麼意思「一般」？ :) – 2013-03-09 19:11:58

對於線高度總是 – Harmen 2013-03-09 19:21:32

1em = 100％，2em = 200％，1,4em = 140％等等。但是，它實際上是依賴於特定的。我認爲ems更「移動友好」，但這取決於開發者。

在CSS中使用百分比值，因爲用戶可以有不同的屏幕分辨率。例如，當您不想在您的js生成的內容中使用空格時。 1em表示「equeal爲實際字體大小」，2「表示ems適合用戶設置。

因此，當父標籤的字體大小被聲明爲「小」，「中」或「大」時，它會發生一些變化，因爲這些值受瀏覽器設置的影響。在此背景下1EM = \ = 100％，1EM似乎使設置多一點「小」或超過100％，更有點「大」，在這裏讀到它：

http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/

可能有性能差異，但這取決於瀏覽器。

來源

2013-03-09 14:13:53

這正是我一直在尋找的答案。你告訴我，除了動態支持之外，ems和百分比實際上是一樣的。我是否正確？我真的不明白你在說什麼。如果它們是相同的，但ems支持得更好，爲什麼我們不使用ems並丟棄百分比？ – 2013-03-09 14:23:42

使用它有一些細微的差異。對於我所知道的你使用EM來獲取字體大小。根據我的經驗，ems比手機的百分比更合適。對我來說，它只是減少了麻煩。我忘了一件事。是的，1em = 100％，但是當父標籤的字體大小被聲明爲「小」，「中」或「大」時，它會稍微變化 - 閱讀我的編輯。 – 2013-03-09 15:11:34

我已經閱讀過這篇文章，現在我對它有了更多的瞭解。但仍然...我不明白爲什麼有這個瀏覽器的設置問題;我以爲他們應該是相同的... – 2013-03-09 15:45:45

em單位和百分數有什麼區別？

回答

相關問題