在 Firefox, Chrome, and Safari 中,可以重新調整以上例子的文本大小,但是在 Internet Explorer 中不行。
雖然可以通過瀏覽器的縮放工具調整文本大小,但是這實際上是對整個頁面的調整,而不僅限于文本。
如果要避免在 Internet Explorer 中無法調整文本的問題,許多開發(fā)者使用 em 單位代替 pixels。
W3C 推薦使用 em 尺寸單位。
1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素,那么對于該元素,1em 就等于 16 像素。在設置字體大小時,em 的值會相對于父元素的字體大小改變。
瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
可以使用下面這個公式將像素轉換為 em:pixels/16=em
(注:16 等于父元素的默認字體大小,假設父元素的 font-size 為 20px,那么公式需改為:pixels/20=em)
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */在上面的例子中,以 em 為單位的文本大小與前一個例子中以像素計的文本是相同的。不過,如果使用 em 單位,則可以在所有瀏覽器中調整文本大小。
不幸的是,在 IE 中仍存在問題。在重設文本大小時,會比正常的尺寸更大或更小。
結合使用百分比和 EM
在所有瀏覽器中均有效的方案是為 body 元素(父元素)以百分比設置默認的 font-size 值:
實例
body {font-size:100%;}
h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
![]() | ![]() .. 定價:¥45 優(yōu)惠價:¥42 更多書籍 |
![]() | ![]() .. 定價:¥225 優(yōu)惠價:¥213 更多書籍 |