Ems轉換爲像素 - 爲什麼選擇62.5％而不是6.25％？

我知道很多人都熟悉將我們CSS中body元素的字體大小設置爲62.5％。這意味着1em將等於10px，並有助於保持像素完美，但也允許縮放字體。Ems轉換爲像素 - 爲什麼選擇62.5％而不是6.25％？

所以不是說將其設置爲6.25％就等於1em = 1px？看起來像一個更簡單的轉換，而不必亂七八糟...

謝謝你們！我很瞭解他們和它的歷史（設計學位），但我確信其他人可能會發現它有幫助:)

至於1em = 1px，我不明白這是如何不受歡迎的。無論你的單位（無論是點還是像素），em都是方形的，沒有人會將它們的類型設置爲1px（就像沒有人會在1pt中設置打印類型一樣）。此外，即使你的文章也承認，在大多數數字字體中，大寫字母「M」通常小於1em，而em僅僅是點大小的反映（48pt類型會爲他們提供48pt乘以48pt的正方形，12pt類型將產生12×12等）

此外，讓一切都很好地擴展，當用戶調整其字體大小人之所以會做這將是更多的頁面設置其它元件的尺寸。當然，總是會有少數人將其默認設置爲16px以外的其他設置，但非常值得付出代價良好的像素完美佈局。

來源

2008-12-22 restlessdesign

，你爲什麼不指定1px，爲什麼要通過100％em的假定大小？ – 2008-12-22 23:44:12

@Rolf - 因爲如果以像素爲單位設置大小，IE6會將它們視爲絕對，並且用戶無法調整文本大小。 – 2008-12-23 14:49:39

我明白了，但是如果你認爲0.0625em == 1px，IE6調整大小時會不會不對齊？如果你試圖保持可移植性，你不應該在px中避免思考嗎？我可以考慮使用px的唯一原因是將圖像與圖像對齊（即不會調整大小），然後您想要px。 – 2009-01-06 16:11:26

可以說，但你失去了控制你的規模。不要忘記，標題通常會繼承與它們的排名成比例的相同尺寸（即<h1>將是最大的，<h2>略小）。如果你想減少這些元素，你需要使用很多小數位佔位符的em值。想象一下<h4> font-size: 0.005em。

或者更糟的是，如果你想要的字體進行縮放時，你可能會尋找在font-size: 40em什麼可笑的。

總之，1em = 10px對於字體縮放值更實用。雖然1：1的比例尺在紙上可能是有意義的，但它並不適合合理且可維護的CSS。

來源

2008-12-22 23:01:09

轉換可能更簡單，但em並不意味着它應該是什麼意思。

1em應該與給定字體中的大寫「M」相等。如果字母M的寬度爲1像素，則字體將無法讀取。

所有的

http://en.wikipedia.org/wiki/Em_(typography)

來源

2008-12-22 23:11:46 Zoredache

首先，不要以爲是1 em就等於10個像素。 em單位與正在使用的版式直接相關。如果某人的字體大小爲16像素，那麼62.5％確實是10像素（16 * 0.625 = 10），但是當某人修改了默認字體大小時，這會明顯改變。

其次，這是我第一次聽說過使用62.5％的基體font-size的。根據Sane CSS Typography by Owen Briggs，我總是使用76％的font-size。

最後，爲了回答您的問題，是的，您可以使用6.25％的字體大小，然後使用12em而不是1.2em。不過，我會高度勸阻這種方法。在typograhy的世界裏，一個em的意圖是the width of the capital letter 'M'。這種方法完全違反了這種慣例，並且會嚴重混淆未來可能維護CSS的任何人。

來源

2008-12-22 23:14:05 cowgod

根據瀏覽器，用戶的設置，特別是最小字體大小設置，整個「62.5％= 10px」的東西基本上都會中斷 - 62.5％可能是10px，也可能不是10px。所以你不能只是設計像素，然後在62.5％= 10px的假設下「轉換」爲ems，因爲你的設計總是會打破。如果你想要一個像素完美的設計，你必須使用像素作爲單位。如果你想要一個靈活的設計，你需要考慮網站不同元素的適當單位--ems的元素應該與文本大小相關，應該相對於窗口大小縮放的元素的百分比以及元素的像素（像圖片），根本不應該縮放。

任何人在他們的CSS中包含字體大小：62.5％基本上不知道如何爲網頁設計。

來源

2009-11-17 19:07:14 user213171

您可能也會覺得這很有用。 http://pixel2em.kleptomac.com 這提供了一個在線像素到EM轉換器，你也可以做一個完整的CSS文件轉換。

來源

2010-01-30 17:36:29 Jai

更新版本可在http://pixelconverter.kleptomac.com 它是一個在線單位轉換器，用於轉換像素，點，em，百分比。這支持從/到任何這些單位的轉換。

來源

2010-02-16 07:43:02 Jai

偉大的問題。

我看到6.25％作爲一個有趣的命題自適應/自適應設計和彈性模板。

特別是字體大小與rem單位借給你自己的論點...... 1：1的比例只是更容易。

rem：「root em」...根元素的字體大小。 http://www.w3.org/TR/css3-values/

查看從此rem例如：http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

現在你的建議...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */ 
body { font-size: 14px; font-size: 14rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 24rem; } /* =24px */

...玩我JSBin例如：Testing CSS3 "rem" Units for Elastic Content

1：1 em到px的比率應該導致l ess拼寫錯誤。

REM注：通過適當的CSS復位和body宣佈基地font-size兩個px和rem你的風格優雅降級...如果rem支持，並px後宣佈，它的價值被應用。否則，瀏覽器會回到px。

確定支持（特別是在移動設備上）爲rem。請使用任何/所有瀏覽器/設備打開此頁面...http://ahedg.es/w/rem.html

來源

2011-05-02 07:04:25

我試圖做同樣的事情，但遇到了邊緣和填充使用rems的問題。將font-size設置爲62.5％可以避免這些問題。

例如，下面的CSS

html { 
    font-size: 6.25% /* 16px * .0625 => 1px */ 
} 

p { 
    font-size: 1rem; 
    margin: 1rem; 
}

呈現爲：

p { 
    font-size: 1px; 
    margin: 9px; /* WTF?! */ 
}

奇怪了，對不對？我假設這是由最小字體大小的一些奇怪衝突造成的。

現在，如果你在另一方面使用font-size: 62.5%，事情渲染爲預期：

html { 
    font-size: 62.5% /* 16px * .625 => 10px */ 
} 

p { 
    font-size: .1rem; 
    margin: .1rem; 
}

呈現爲：如果你想一些空間，或大小爲1px的

p { 
    font-size: 1px; 
    margin: 1px; 
}

來源

2014-10-27 15:30:36 elstgav

Ems轉換爲像素 - 爲什麼選擇62.5％而不是6.25％？

回答

相關問題