CSS中的單位有很多種,其中相對(duì)單位是我們經(jīng)常用到的一種。相對(duì)單位是相對(duì)于其他單位或者文檔的一種度量方式,它的值是相對(duì)于某個(gè)其他值的。
常見的相對(duì)單位有兩種:em和rem。其中em單位是相對(duì)于字體大小的單位,如果當(dāng)前字體大小為16像素,1em就等于16像素,而0.5em就等于8像素。我們可以利用這個(gè)特性來(lái)實(shí)現(xiàn)字體大小的相對(duì)調(diào)整。例如,我們可以這樣設(shè)置:
p { font-size: 1em; } h1 { font-size: 2em; }
這樣,p元素的字體大小就為16像素,而h1元素的字體大小就為32像素。這樣設(shè)置可以使頁(yè)面的字體大小保持一致,并且不需要改變每個(gè)元素的具體字體大小。
rem單位也是相對(duì)于字體大小的單位,不過(guò)它是相對(duì)于根元素的字體大小來(lái)計(jì)算的。如果根元素的字體大小為16像素,1rem就等于16像素,而0.5rem就等于8像素。這樣設(shè)置可以方便地實(shí)現(xiàn)頁(yè)面的整體字體大小調(diào)整,例如:
html { font-size: 16px; } p { font-size: 1rem; } h1 { font-size: 2rem; }
這樣,在html上設(shè)置根元素的字體大小為16像素之后,p和h1元素的字體大小就可以直接使用rem單位來(lái)設(shè)置。如果我們需要改變整個(gè)頁(yè)面的字體大小,只需要修改根元素的字體大小即可。
除了em和rem,CSS還有其他相對(duì)單位,例如百分比單位和vh/vw單位。但是,不管使用哪種相對(duì)單位,我們都需要注意保持頁(yè)面的字體和布局的一致性,避免出現(xiàn)過(guò)大或過(guò)小的元素。