CSS單位的示例分析

這篇文章主要介紹了CSS單位的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

　　單位作用特性px頁面按精確像素展示絕對單位rem相對根節點html字體大小來計算相對單位em基準點為相對父節點字體的大小相對單位%相對于父元素的大小設定的比率相對單位vw視窗寬度的百分比，1vw代表視窗寬度的1%視窗單位vh視窗高度的百分比，1vh代表視窗高度的1%視窗單位vmin當前vw和vh中較小的一個值視窗單位vmax當前vw和vh中較大的一個值視窗單位

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

　　視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

　　假如給頁面設置一個寬800px，則400px=50vh=50%。

　　一、px、em和rem的區別

　　px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。

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

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

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

　　二、vw、vh 與 % 百分比的區別

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

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

　　三、vmin、vmax 用處

　　做移動頁面開發時，如果使用 vw、wh 設置字體大?。ū热?5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。

　　由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS單位的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!