CSS是一種用于網頁設計和樣式的語言。其中涉及到了大量的度量單位,本文將會介紹CSS中的度量單位類型和其之間的區別。
單位類型: 1. px 2. em 3. rem 4. %(百分比) 5. vw/vh px:像素單位,是最常用的CSS度量單位。它是一個絕對單位,不受瀏覽器縮放的影響。在不同分辨率的設備上顯示效果會有差別。 如:font-size: 16px; em:相對單位,是相對于父元素字體大小的倍數。如果設置了font-size,則以它為基準,否則以瀏覽器默認字體為基準。當元素的font-size的值發生改變,那么相對于這個元素的em也將有所改變。 如:font-size: 1em; rem:相對單位,與em的唯一區別在于,它參考的是根元素的字體大小。rem在瀏覽器縮放的情況下表現更為一致。 如:font-size: 1rem; %:百分比單位,相對于包含塊的計算值,對于font-size來說,即其父元素的字體大小。多用于頁面布局。 如:width: 50%; vw/vh:相對單位,表示視口寬度或高度的百分比。其中vw(視口寬度) = 1/100 * 視口寬度,vh(視口高度) = 1/100 * 視口高度。 如:width: 50vw;
在CSS中,度量單位決定了樣式表的具體效果,選擇合適的度量單位是實現頁面可用性的關鍵步驟之一。