常用:(px除外)
em
:定義字體大小時以父級的字體大小爲基準;定義長度單位時以當前字體大小爲基準。例父級font-size: 14px
,則子級font-size: 1em;
爲font-size: 14px;
;若定義長度時,子級的字體大小如果爲14px
,則子級width: 2em;
爲width: 24px
。rem
:以根元素的字體大小爲基準。例如html
的font-size: 14px
,則子級1rem = 14px
。%
:以父級的寬度爲基準。例父級width: 200px
,則子級width: 50%;height:50%;
爲width: 100px;height: 100px;
vw和vh
:基於視口的寬度和高度(視口不包括瀏覽器的地址欄工具欄和狀態欄)。例如視口寬度爲1000px
,則60vw = 600px;
vmin和vmax
:vmin
爲當前vw
和vh
中較小的一個值;vmax
爲較大的一個值。例如視口寬度375px
,視口高度812px
,則100vmin = 375px;
,100vmax = 812px;
不常用:
ex和ch
:ex
以字符"x"
的高度爲基準;例如1ex
表示和字符"x"
一樣長。ch
以數字"0"
的寬度爲基準;例如2ch
表示和2個數字"0"
一樣長。