CSS是網頁樣式表的一種語言,它定義了網頁的外觀和布局。在CSS中,長度和尺寸的默認單位是像素(px)。
p{ font-size: 16px; line-height: 1.2 }
在上面的代碼中,字號被設置為16像素,行距被設置為字號的1.2倍。如果不指定單位,默認使用像素單位。
不過在某些情況下,像素單位可能不是最好的選擇。在一些高分辨率的設備上,使用像素單位可能會導致文字和圖標變得非常小。為了解決這個問題,CSS3引入了新的相對長度單位,如em、rem和vw等。
em單位是相對于父元素的字號大小而定的。例如,如果一個段落的字號被設置為16px,那么如果在它的子元素中使用1.5em的字號,實際上就是1.5 * 16 = 24像素。這樣就可以讓字號在不同的層次之間更加一致。
p{ font-size: 16px; } span{ font-size: 1.5em; }
在上述代碼中,span元素的字號被設置為1.5em,實際的字號大小就是24像素。如果將該段落放在一個更大的容器中,其字號大小可能會被更改,但子元素的相對大小將保持不變。
rem單位類似于em,但它是相對于根元素(即html元素)的字號大小而定的。這意味著當調整瀏覽器的字號大小時,整個頁面的元素也會相應地調整大小。這種方法可以讓網頁在不同的設備上呈現出更好的可訪問性和可讀性。
html{ font-size: 16px; } p{ font-size: 1.5rem; }
在上面的代碼中,html元素的字號被設置為16像素,但在段落中使用1.5rem的字號。這意味著如果在瀏覽器中將字號設置為150%,該段落的字號將變為24像素,而不是應用于父元素的字號大小。
vw單位是相對于視口寬度的百分比。例如,如果視口寬度為1000像素,那么一個200vw寬的元素將有2000像素的寬度。這個單位通常用于創建響應式設計,并可以讓元素在不同的設備上呈現出協調的比例。
.box{ width: 50vw; height: 50vw; }
在上述代碼中,.box元素的寬度和高度都被設置為視口寬度的50%。這意味著在任何設備上,它的寬度和高度比例都將保持為1:1。
綜上所述,CSS中的默認單位是像素(px),但也提供了其他相對單位以適應不同的需求。合理地選擇合適的單位可以讓網頁在不同的設備上呈現出最佳效果。