溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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的區別一句話概括：em相對于父元素，rem相對于根元素。
rem中的r意思是root（根源），這也就不難理解了。
% 是相對于父元素的大小設定的比率，vw、vh 是視窗大小決定的。
vw、vh 優勢在于能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）
做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
關于“CSS單位是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
