vw
- Data publikacji
- Ostatnio edytowano
Przeznaczenie jednostki vw
Jednostka vw
(czyli viewport width) oznacza jeden procent (czyli 0.01
) aktualnego rozmiaru szerokości płaszczyzny, na której została wyświetlona dana strona internetowa. Wspomnianą płaszczyzną najczęściej jest okno przeglądarki internetowej.
Przykładowo, gdy rozmiar szerokości okna przeglądarki internetowej w danej chwili wynosi 1024px
to długość 1vw
jest równa 10.24px
, ponieważ 1024px×0.01×1=10.24px
, natomiast długość 8vw
jest równa 81.92px
, ponieważ 1024px×0.01×8=81.92px
itd.
"Nvw" = "viewport width" × "0.01" × "N"
Przykład jednostki vw
width:30vw;
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
width:30vw;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30vw", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30vw"
</div>
</body>
</html>
Interpretacja jednostki vw
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji jednostki vw.