使用 em 來設定字型大小

2021-07-04 06:56:16 字數 608 閱讀 8000

如果要避免在 internet explorer 中無法調整文字的問題,許多開發者使用 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  /* 60px/16=3.75em */

h2 /* 40px/16=2.5em */

p /* 14px/16=0.875em */

親自試一試

在上面的例子中,以 em 為單位的文字大小與前乙個例子中以畫素計的文字是相同的。不過,如果使用 em 單位,則可以在所有瀏覽器中調整文字大小。

不幸的是,在 ie 中仍存在問題。在重設文字大小時,會比正常的尺寸更大或更小。

refer from

響應式布局中為什麼要使用em設定字型大小而不用px

px畫素 pixel 相對長度單位。畫素px是相對於不同裝置顯示器螢幕解析度 pad phone pc 而言的。引自css2.0手冊 1em指的是乙個字型的大小,它會繼承父級元素的字型大小,因此並不是乙個固定的值。任何瀏覽器的預設字型大小都是16px。px相對的螢幕解析度,而em相對於父級div,所...

Gvim 字型大小設定

經過多方試驗,在win下設定vim的大小終於成功了,備份如下,現在把gvim7.1更改字型的方法記錄如下,一段時間後,可能會失效,對他人造成困擾吧?在 vimrc中寫 set guifont courier new h10 設定字型為courier new,大小10號 若在linux下,應該寫為,s...

Matlab設定字型大小

1.設定座標軸上下限 axis xmin,xmax,ymin,ymax x1和y1是圖的左下角座標,dx和dy是圖沿著x和y方向的大小,比如 set gcf,position 347,162,380,300 圖例中字型及大小 legend fontname times new roman fonts...