網頁設計-蓋婭科技有限公司 -- 網頁設計 - 網頁設計常用到的單位
正在加載......
X
 
會員帳號 :
會員密碼 :
忘記密碼    加入會員

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR

網頁設計 - 網頁設計常用到的單位

網頁設計 - 網頁設計常用到的單位

對於每一個從事網頁設計的人來說,在撰寫CSS時,無可避免的,會用到各式各樣的單位。雖然比起現實生活中會用到的度量衡單位,網頁設計需要面對的單位數量已經算是少到相當和藹可親了,但一些名詞上意思依然令人感到困惑。在這篇文章中,我們會整理幾個常用到的單位並加以說明,希望每個人在進行網頁設計時,都能清楚知道自己所用的單位代表什麼意思,進而設計出更漂亮的網頁來!


前言

下文介紹到的各式單位,是根據JavaScript所定義的,這些單位在HTML及CSS中也適用。但px、%以外的單位,只能用於樣式表,這點請各位網頁設計者注意。


相對大小的單位

所謂相對大小的意思,代表同一個設定值在不同的環境底下,會產生或看到不一樣的效果。這類單位的特色,是它們存在一個參考的基準點,所展現的效果會依基準點的不同而不同。好處是具有較大的彈性,可以隨環境而變動。缺點則是在某些網頁設計的當時沒有預想到的環境底下,有機會產生可怕的災難。

px:像素,以1個像素為1。主要是用在電腦輸出,是最常用的單位之一。但每位使用者會根據自己電腦解析度的不同,看到不一樣的大小。

% :與其他大小之間的比率。比較對象有可能是同一元素內的性質,也有可能是父元素的性質。視網頁設計者的使用方式而定。

em:將範圍內,有效字型高度(font-size的值)當做是1的單位。如果樣式表中的font-size性質是使用這個單位,那父元素的「有效字型高度」,會被當做是1。

ex:將範圍內,有效字型小寫「x」的高度當做是1的單位。在網頁設計時要注意的是,每種字形的「x」高度不一定相同。另外如果該字形中沒有「x」,也不適用這個單位。

em和ex的示意圖

絕對大小的單位

比起相對大小複雜的基準點參考,對網頁設計者來說,絕對大小應該會好理解很多。但我們必須重複提醒所有的網頁設計者,絕對大小的意思,是它們不會隨環境而變動,這是和相對大小最大的不同點。

in:英吋。1英吋=2.54公分。

cm:公分。

mm:公釐。1公釐=0.1公分。

pt:點。1點=1/72英吋,一般用在指定字元大小上,也是文書軟體常用的單位。

pc:皮卡。1皮卡=12點。


結語

看完這篇文章後,網頁設計者一定想問一件事:「那我在做網頁設計時,到底要用什麼單位比較好?」其實這是見仁見智的問題,嚴格來說沒有標準的答案,我們只能提示幾點原則。

首先CSS中,其實沒有要求統一單位。但混用各種不同的單位對網頁設計而言其實並沒有太大的好處,所以在可能的情況下,儘量統一單位會比較有一致性。

接著,網頁設計本來就是做出來讓瀏覽者在電腦上面看的。考量到每個人電腦的差異性,利用相對大小可能會好一些。不是說絕對單位不好,但絕對單位的強項在會需要實際列印出來的東西上,而非網頁設計。

最後,如果真的為此感到困擾,建議可以盡可能使用px,畢竟它是以電腦解析度做為參考,瀏覽者看到的差異比較不會那麼大。


: NT 0
   

分享: 把Tellus推薦至Facebook 把Tellus分享至PLURK 把Tellus分享至twitter 把Tellus分享至MURMUR


蓋婭科技網站導覽

站內搜尋

Loading

協力廠商

最後更新 : 01/19/2016

gotop