在 CSS(層疊樣式表)中,可以使用不同的單位來表示長度、寬度、字體大小等尺寸。其中,絕對單位和相對單位是兩種常見的單位類型。
1. 絕對單位
絕對單位的值和屏幕的分辨率有關,因此不隨頁面縮放而改變。常見的絕對單位包括: 1) px(像素):最常見的絕對單位,表示像素點的數量,是測量屏幕分辨率的一個基本單位。使用 px 的好處是在不同設備上呈現的效果一致。 2) in(英尺):英制長度單位,1in 等于 2.54cm。 3) cm(厘米):國際單位制長度單位,1厘米等于 0.3937 英寸。 4) mm(毫米):1毫米等于 0.1厘米。 5) pt(磅):印刷單位,1pt 等于 1/72 英寸。 6) pc(派卡):印刷單位,1pc 等于 12pt。
2. 相對單位
相對單位不同于絕對單位,它是根據父元素的尺寸來計算的,所以在不同的設備上,呈現出來的效果會有所差異。常見的相對單位包括: 1) em:基于當前元素的字體大小計算,1em等于當前字體大小。它的特點是具有繼承性,可以被嵌套的元素所繼承。 2) rem:根據 HTML 根元素(即 html 元素)的字體大小來計算, 1rem 等于根元素的字體大小。它的好處是可以方便的控制整個頁面的字體大小。 3) vw:視窗寬度,1vw等于視口寬度的1%,即如果視口寬度為1000px,則1vw等于10px。 4) vh:視窗高度,同上。 5) %(百分比):相對于所在容器的尺寸大小計算,常用于設置寬度或者高度的比例大小。
在實際開發中,我們需要根據具體需求來選擇不同的單位。絕對單位適用于需要精準控制尺寸的場景,而相對單位適用于需要響應式布局的場景。