CSS「em」問題：避免縮小到特定元素的字體大小

我的網站幾乎完全採用「em」（而不是px）設計。對於現代瀏覽器來說，它應該會好得多。CSS「em」問題：避免縮小到特定元素的字體大小

大部分文字都是font-size：1em。 1em = 16px默認情況下，我沒有指定它。

但我有一些內容的字體大小是1.2em和其他0.8em（例如對於H1或小按鈕）。

「em」的問題是它根據字體大小重新縮放元素的所有大小（邊距，填充，高度...）。

我在我的CSS具體代碼：

/* Reset */ 
html [and many other elements] { 
    font-size: 100%; 
    font: inherit; 
} 
/* Design */ 
body { 
    font-size: 1em; 
    line-height: 1; /* Line height will equal the em of each element */ 
} 
.small-button { 
    font-size: 0.8em; 
    margin-left: 1em; 
} 
.normal-button { 
    font-size: 1em; 
    margin-left: 1em; 
}

正常的按鈕有1x1x16 = 16px的保證金。但小按鈕的邊距爲1x0.8x16 = 12.8px。

顯然這是一個特定的「em」屬性（它不會是「px」中的情況），它根據元素的字體大小來縮放一切。

這個例子很簡單;但在我的網站上，讓事情真的很難保持一致。

如何取消激活此屬性，以便在上面的示例中2個按鈕具有相同的邊距？（沒有重新計算大小，這正是我現在正在做的！）

來源

2014-01-24 Ren

這是em單元的用途，它與當前設置的字體大小有關。如果你想使用一致的形式，使用單位'rem'。它與頁面的根元素（很可能是你的html標籤）相關，代表root em。

看看這篇文章由喬納森Snook如果你想了解更多關於它。 http://snook.ca/archives/html_and_css/font-size-with-rem

來源

2014-01-24 12:57:13 Haroldchen

嗨Haroldchen.Would你推薦使用「rem」還是它太具體和一個禁區？我可以在這裏看到http://caniuse.com/rem對於「em」有82％的兼容性，100％... – Ren

這實際上取決於你的目標是什麼。 IE8和OperaMini是真正的問題。你可以填充這兩個瀏覽器（https：// github。com/chuckcarpenter/REM-unit-polyfill）。或者您每次重新定義字體大小時調整em單位。就我個人而言，我大部分項目都使用ems來根據需要調整em值。 – Haroldchen

就我個人而言，我在身體中設置了我的「主單位」並以10的倍數繼續。我討厭股票16pt，因爲我不想用圖表來設置我想要的字體大小。

body { font-size:10pt; }

至於具體的內容，請記住，如果你有一個大小的1.2em元素（比如一個ul），以及li設置爲1.0，和你的身體是10pt，那麼li實際上基於是關閉它的父容器，所以這將是1.2em而不是1.0（又名10pt作爲套在身上），因爲它是父是1.2em。

如果您有想要在整個特定大小的東西（比如主菜單），我建議你放棄那個特定的父對象（或li本身）的em方法，並使用一組px或pt方法。

來源

2014-01-24 12:55:03

CSS「em」問題：避免縮小到特定元素的字體大小

回答

相關問題