CSS中的相對單位指的是大小和位置的度量值在不同的環境下會自動適應變化,主要包括百分比、em和rem。
/* 百分比 */ div { width: 50%; height: 50%; }
百分比單位是基于父元素計算出來的,例如上面的代碼中div的寬和高都是父容器的一半。
/* em */ p { font-size: 1.2em; margin-top: 0.5em; }
em單位是相對于元素自身的字體大小計算的,例如上面的代碼中p的字體大小是父元素字體大小的1.2倍,上邊距是字體大小的0.5倍。
/* rem */ body { font-size: 16px; } div { width: 10rem; height: 5rem; }
rem單位是相對于根元素html的字體大小計算的,例如上面的代碼中div的寬為10倍根元素字體大小,高為5倍根元素字體大小。
相對單位的使用可以讓網頁在不同的設備和環境下顯示的更為一致和友好。