CSS中的vw單位代表“視口寬度”,也就是相對于視口(即瀏覽器窗口)的寬度。
vw = 視口寬度的1/100
舉個例子,如果視口寬度是1000px,那么1vw就是10px,即:
1vw = 1000px / 100 = 10px
因此,使用vw單位可以實現響應式布局,即不需要使用@media查詢在不同設備寬度下切換樣式,而可以直接根據視口寬度設定元素的尺寸。
可以使用vw單位的CSS屬性有寬度、最小寬度、最大寬度、字體大小、邊框寬度等。例如:
/* 將元素的寬度設為視口寬度的50% */ width: 50vw; /* 將元素的最小寬度設為視口寬度的200px */ min-width: 200px; /* 將元素的字體大小設為視口寬度的3% */ font-size: 3vw; /* 將元素的邊框寬度設為視口寬度的1px */ border: 1vw solid black;