Autor publikacji
Virtual Patriot - Administrator

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;
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"

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji jednostki .