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

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的10年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如軟裝設(shè)計(jì)等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

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

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

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

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

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

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

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

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

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

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

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

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

三、vmin、vmax 用處

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

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