css中vw與vh的區別是什麼
在css中vw與vh的區別:vw單位可以根據視窗的寬度自動改變大小,“1vw”是視窗寬度的“1%”;vh單位可以根據視窗的高度自動改變大小,“1vh”是視窗高度的“1%”。
在css中,vw與vh的區別是:
vw單位可以根據視窗的寬度自動改變大小,1vw是視窗寬度的1%;
vh單位可以根據視窗的高度自動改變大小,1vh是視窗高度的1%;
vw是css的一個屬性,和px,rem等類似,屬於長度單位。在瀏覽器中, 1 vw = viewport 的寬度 /100
根據這個特性,vw 可以幫助我們實現移動端自適應佈局,其優點在於所見即所得,甚至優於rem,因為完全不用使用額外的計算。
推薦和sass、less這種css預處理語言一起使用,因為其可以定義變數及函式,會在使用vw上提供巨大幫助。
vm、vh、vmin、vmax是一種視窗單位,也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似於 1%。 視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
具體描述如下:
vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)
vh:視窗高度的百分比
vmin:取當前Vw和Vh中較小的那一個值
vmax:取當前Vw和Vh中較大的那一個值
vh和vw相對於視口的高度和寬度, 1vh 等於1/100的視口高度,1vw 等於1/100的視口寬度 比如:瀏覽器高度900px,寬度為750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易實現與同螢幕等高的框。
示例如下:
<head> <title>vh_CSS參考手冊_web前端開發參考手冊系列</title> </head> <body>相對於viewport高度大小的文字
相對於viewport寬度大小的文字
</body>輸出結果:
15.png