1. 程式人生 > 其它 >css中vw與vh的區別是什麼

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