單位作用特性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。使得文字大小在橫豎屏下保持一致。
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.