iT邦幫忙

DAY 28
3

只是路過 HTML5 系列 第 28

●筆記關於值的相對單位

現在來介紹一些CSS中的單位

絕對大小:mm, cm, in, pt, pc
相對大小:em, ex
相對於設備(顯示器解析度):px

常用的是px、em、%
各單位解釋如下:

px: pixels 像素 在螢幕上顯示的單位。

若把網站影像放大放大再放大,
會發現連續色調其實是由許多色彩相近的小方點所組成,像是馬賽克一般,
這些小方點就是構成影像的最小單位“像素”。
像素可以用一個數表示,
例如“1024*768顯示器”,=橫向1024像素和縱向768像素,因此其總數為1024 × 768 = 786432像素。

像素值就能夠在螢幕上進行了精確的定位
如果要強迫使用者看到的字型大小跟設計者的畫面一樣,就一定要用 px 為單位。
最能達到一致性!

但是如果有位老花眼的使用者,想看字比較大的網站內容(無障礙網站),
px一開始就在網頁樣式宣告裡訂定大小,無法修改字體。
此時,
我們可以使用em,可以彈性的在瀏覽器裡自由調整字級大小,
透過「瀏覽器的字級調整功能-字級:大、中、小等」來放大縮小文字。

em原本是印刷上用來衡量字體大小的單位,
em並不是任何專有名詞的縮寫,而單純只是指一個大寫字母「M」所佔有的寬度。
什麼是大寫字母「M」呢?
因為在所有字母裡,M是最接近全尺寸滿格的一個,所以把它拿來當作衡量字體大小的單位。

HTML 中預設的文字大小是 16 像素,在 CSS 語法中 1 em 指的是文字大小以一個大寫的 M 字為標準的大小,和HTML 中預設的文字大小是 16 像素是相同的。

所以一般都以16點作為1 em。

em有兩個特點:
(1) em的值並不是固定的
(2) em會繼承父級元素的字體大小

CSS 在設計頁面的時後, 並不是說 px 就一定不要用, 只是要注意說, 畫面放大的時後, px 指定的是不會跟著一起放大,
筆記建議如下:

文字: 使用 em 或 %.
間距: 兩個 Module 的間距這種, 用 px (不然畫面放大, 間距也跟著放大, 也蠻難看的.

Yahoo! 的 YUI Fonts CSS 是建議, 字的大小都用 % 來表示, 所以他也有提供對照表:

10px => 77%
11px => 85%
12px => 93% (was 93)
13px => 100%
14px => 108% (was 107)
15px => 116% (was 114)
16px => 123.1% (was 122)
17px => 131% (was 129)
18px => 138.5% (was 136)
19px => 146.5% (was 144)
20px => 153.9% (was 152)
21px => 161.6% (was 159)
22px => 167%
23px => 174%
24px => 182%
25px => 189%
26px => 197%

照 YUI 的說法是, 平常在寫 自訂區塊、頁寬等, 先用 px 數確定好, 再照下面的公式去算 em 值:

px / 13 = em (non IE)
px / 13 * 0.9759 = IE

其它要再注意的是:

最好要設 min-width
其它都用 % 算

例如:
使用em作為字級單位時,通常會先宣告body的字級大小,譬如說我慣用12px大小的字級,就先宣告body如下:

body { font-size:75% } /* 16px*75%=12px */

這段意思是指對整體的CSS文字做em對於px的轉換。
瀏覽器預設的大小是16px。
網頁上的1em就不再是預設的16px,而是12px。
1em=12px
body宣告完後,就可以開始以em為單位來制定字級:

body { font-size:75% } /* 16px*75%=12px */
h1 {font-size:2em} /* 2*12px=24px */
p{font-size:1.25em} /* 1.25*12px=15px */
li, span{font-size:1.25em} /* 1.25*12px=15px */

不過,相較於px,em的使用彈性雖大,但,卻依然存在需要進一步解決的問題。

em的問題是:字級大小會隨著巢狀層級而疊加。

譬如說:li的字級是15px,但li裡的li則會因為1.25*15px而疊加到18.75px,若再有一層li li li則會進一步1.25*18.75疊加上去……。

em的疊加問題,其解決之道雖然只要再加一行宣告,讓巢狀結構下的所有次層級都歸零即可。

li li, li p, li span, li p span, p span{font-size:1em} /* 歸零 */

不過,如果巢狀結構複雜,歸零作業也會變得相對麻煩。

rem:是CSS3新推出來解決em疊加問題的字級單位。

rem的字義是「root em」,簡單地說,就是先宣告一個所有網頁元件都共用的em單位:

html { font-size:75% } /* 16px*75%=12px */

接著,所有字級都依此標準來設計制定:

body { font-size:1rem } /* 1*12px=12px */
h1 {font-size:2rem} /* 2*12px=24px */
p{font-size:1.25rem} /* 1.25*12px=15px */
li, span{font-size:1.25rem} /* 1.25*12px=15px */

由於所有網頁元件都共用同一個em單位,所以也不會產生em的疊加問題。

其他單位:
ex: font-size的x-height值,為小寫字母x的高度,通常相當於font-size的一半。

pt
絕對長度單位。點(Point)。列印的點數大小。 1 pt = 1/72 吋,
1in = 2.54cm = 25.4 mm = 72pt = 6pc
要讓字型大小隨著使用者調整的螢幕大小比例來變動,則是用 pt 為單位。
假設 Windows 系統標準預設字型 9pt 來看,當使用者將系統預設字型大小調大的時候,網頁的字型大小也會跟著變。
1024*768 大字型(120dpi),選單 CSS 設為 9pt
pc: picas, 1 pc = 12 pt
如果沒有註明單位,那預設的單位是 px

pc
絕對長度單位。派卡(Pica)。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

in
絕對長度單位。英寸(Inch)。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

mm
絕對長度單位。公釐、毫米(Millimeter)。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
絕對長度單位。公分、厘米(Centimeter)。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

額外補充:
行間距
行間距取決於字體的大小,一般來說,小的字號需要大一點的行間距來便於閱讀,
中文字體在網頁上如果沒有行間距的設定,對於閱讀大段文字來說是讀者的災難,
所以適當設定line-height是非常必要的。一般地, line-height 在網頁設計中應該是字體大小的1.5倍到2倍。
Word 和其它的文本編輯軟件裡, 一般設定字體的120%作為缺省的行間距。
css裡的line- height 設定,
是均分後加在每一行的上下,也就是說,如果line-height 設定為20px 的話,那麼每一行文字的上下各有10px的間距。

在寫 CSS 時, 都建議掛進 css reset, 然後再來寫自己要的 Style.

●如果元素自身沒有設置字體大小,那麼元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等
em的公式:
1 ÷ 父元素的font-size × 需要轉換的像素值= em值
●如果元素設置了字體大小,那麼元素自身上的所有屬性值如“boder、width、height、padding、margin、line-height”等
em的公式:
1 ÷ 元素自身的font-size × 需要轉換的像素值= em值

資料來源:

網頁設計該用哪種字級單位:px、em或rem?
http://jas9.blogspot.com/2011/09/pxemrem.html
CSS中強大的EM
http://www.w3cplus.com/css/px-to-em
CSS 使用 px 和 em 的差異
http://blog.longwin.com.tw/2007/12/css\_px\_em\_difference\_2007/
在CSS樣式表中,經常看到pt, px,em,ex,in等長度單位,各是什麼意思,有什麼區別?
http://wenda.tianya.cn/question/4d074ccf653b7242
css中的度量單位 px em ex pt pc in mm cm
http://www.cssk8.com/html/css\_Tutorial/201102/28-2607.html
YUI: CSS Grid Builder
http://developer.yahoo.com/yui/grids/builder/
EmChart - em vs px 轉換圖表
http://fordinteractive.com/tools/emchart/

補充:
給 CSS 新手的入門說明
http://atelier-wini.blogspot.tw/2009/01/css.html
快速生成CSS--LESS學習總結http://www.cnblogs.com/logoove/archive/2012/05/16/2502167.html


上一篇
●CSS使用方法
下一篇
●HTML、CSS、JavaScript如何註解?
系列文
只是路過 HTML5 30
0
wordsmith
iT邦高手 1 級 ‧ 2013-01-02 14:15:24

寫得真是精確又完整,看完這一篇,就可以了解CSS在字型尺寸上如格設定了。

我要留言

立即登入留言