Ostatnio edytowany:

vh

Autor: Virtual Patriot

Przeznaczenie jednostki vh

Jednostka vh (czyli viewport height) oznacza jeden procent (czyli 0.01) aktualnego rozmiaru wysokoś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 wysokości okna przeglądarki internetowej w danej chwili wynosi 768px to długość 1vh jest równa 7.68px, ponieważ 768px×0.01×1=7.68px, natomiast długość 8vh jest równa 61.44px, ponieważ 768px×0.01×8=61.44px itd.

"Nvh" = "viewport height" × "0.01" × "N"

Przykład jednostki vh

rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30vh", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30vh"

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:30vh;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30vh", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30vh"
    </div>

  </body>
</html>

Interpretacja jednostki vh

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 .