CSS單位是什么

這篇文章將為大家詳細(xì)講解有關(guān)CSS單位是什么，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

像 px、rem、em、% 這樣的長度單位大家肯定都很熟悉，前者為絕對單位，后者為相對單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對它們做個詳細(xì)介紹。

tip：vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節(jié)點(diǎn)或者頁面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。

視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—，換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。
假如給頁面設(shè)置一個寬800px，則400px=50vh=50%。

一、px、em和rem的區(qū)別

px是固定的像素，一旦設(shè)置了就無法因?yàn)檫m應(yīng)頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應(yīng)式布局。

對于em和rem的區(qū)別一句話概括：em相對于父元素，rem相對于根元素。

rem中的r意思是root（根源），這也就不難理解了。

二、vw、vh 與 % 百分比的區(qū)別

% 是相對于父元素的大小設(shè)定的比率，vw、vh 是視窗大小決定的。

vw、vh 優(yōu)勢在于能夠直接獲取高度，而用 % 在沒有設(shè)置 body 高度的情況下，是無法正確獲得可視區(qū)域的高度的，所以這是挺不錯的優(yōu)勢。

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 767273102 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

三、vmin、vmax 用處

做移動頁面開發(fā)時，如果使用 vw、wh 設(shè)置字體大?。ū热?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。
由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

關(guān)于“CSS單位是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。