CSS中的長度單位有很多種,其中相對長度單位是一種比較常用的。相對長度單位是相對于某些特殊的長度或角度來定義的單位,不同的相對長度單位對應(yīng)著不同的參考值。
/*em*/ p{ font-size: 16px; line-height: 1.5em; }
其中,一種比較常見的相對長度單位是em。1em定義為元素的字體大小,例如上面的例子中,p元素的字體大小為16px,所以它的行高為24px(即1.5×16),這里1.5就是1.5em。
/*rem*/ html{ font-size: 16px; } p{ font-size: 1.5rem; }
另外一種比較常見的相對長度單位是rem。1rem定義為根元素html的字體大小,例如上面的例子中,根元素html的字體大小為16px,所以p元素的字體大小為24px(即1.5rem),這里1.5就是1.5rem。
/*vw, vh*/ p{ width: 50vw; height: 50vh; }
除了em和rem,還有一些相對長度單位可以用于定義寬度和高度,例如vw和vh。vw表示視窗寬度的百分比,vh表示視窗高度的百分比。例如上面的例子中,p元素的寬度為視窗寬度的50%,高度為視窗高度的50%。
相對長度單位的優(yōu)點在于,它們可以根據(jù)瀏覽器的縮放情況自動調(diào)整大小,適應(yīng)不同的屏幕尺寸和分辨率,而不需要手動修改代碼。因此,在設(shè)計響應(yīng)式布局的網(wǎng)站時,相對長度單位是非常有用的。