流體佈局的Em與px設置

Question

我正在閱讀關於最佳字體大小和佈局大小的信息......並且我正在尋找em而不是px。

從我的理解，如果我做這樣的CSS;

html { 
font-size: 16px; 
} 

body { 
    font-size: 1em; 
} 

它將強制瀏覽器，使16像素= 1em的，這將使我通過計算期望的像素/ 16做寬度和高度屬性，是嗎？

Answer 1

幾乎所有的瀏覽器都將其默認字體大小設置爲16px。

所以，如果你只是在你的身體標籤上設置字體大小：100％，然後工作，你會變得金黃。

下面是我用您的基本尺寸計算字體大小的好發部位：

http://riddle.pl/emcalc/

在設置標籤簡單地將其更改爲16像素，這就是您設置。

Answer 2

你是對的，@ Billy Moat也是如此。

通過在HTML元素上明確聲明16px值，你並不是真正獲得任何東西 - 瀏覽器往往會這樣做。

另一個可以使用的技巧是「62.5％」的竅門。

如果聲明：

body { font-size: 62.5% } 

你可以做進一步的聲明中EM這麼地圖整齊像素測量。例如：

h1 { font-size: 3em; /* equals 30px */ } 
h2 { font-size: 2.4em; /* equals 24px */ } 
.nav { width: 50.5em /* equals 505px */ } 

這是因爲10/16 = .625。所以有了這個訣竅，你可以改變你的測量結果，而不必在處理16px的底數時進行數學運算。

這種方法的唯一技巧是，一旦你爲一個元素聲明瞭一個字體大小，所有的子元素都必須根據該父元素的值（所有相對測量單位都是如此）具有em值。