`Unități de viewport (vw, vh, dvh, svh, lvh)` în CSS

Funcții și unități CSS vw, vh, vmin, vmax: CSS3+; svh, lvh, dvh: Chrome 108, Firefox 101, Safari 15.4

Unitățile relative la fereastra browserului și variantele noi (svh, lvh, dvh) care rezolvă problema lui 100vh pe telefoane.

Sintaxă CSS

height: 100vh;   /* fereastra cu bara browserului ascunsă */
height: 100svh;  /* fereastra cu bara browserului vizibilă */
height: 100dvh;  /* se ajustează în timp real */
width: 50vw;
font-size: 4vmin;

Ce face `Unități de viewport (vw, vh, dvh, svh, lvh)`

1vw este 1% din lățimea ferestrei, iar 1vh este 1% din înălțimea ei. vmin și vmax folosesc latura mai mică, respectiv mai mare. Variantele logice vi și vb urmează direcția textului.

Pe telefoane, bara de adrese apare și dispare la derulare, deci înălțimea ferestrei se schimbă. Browserele au ales ca 100vh să fie înălțimea maximă (cu bara ascunsă), așa că un ecran de start cu height: 100vh este mai înalt decât spațiul vizibil la încărcare și butonul de jos rămâne ascuns.

Unitățile noi rezolvă problema:
• svh (small): înălțimea cu barele browserului vizibile, cea mai mică posibilă.
• lvh (large): înălțimea cu barele ascunse, cea mai mare posibilă (echivalentă cu vh).
• dvh (dynamic): se schimbă în timp real între cele două.
Există și variantele pentru lățime: svw, lvw, dvw.

Valori uzuale

Valoare	Descriere
`vw / vh`	1% din lățimea / înălțimea ferestrei (vh corespunde lui lvh pe mobil).
`vmin / vmax`	1% din latura mai mică / mai mare a ferestrei.
`svh / svw`	1% din fereastra cea mai mică (cu bara de adrese vizibilă).
`lvh / lvw`	1% din fereastra cea mai mare (cu bara de adrese ascunsă).
`dvh / dvw`	1% din fereastra actuală; se schimbă la apariția și dispariția barei.

Exemple

Exemplul 1: Ecran de start pe toată înălțimea, cu butonul mereu vizibil

Prima declarație este rezervă pentru browserele vechi; browserele actuale o folosesc pe a doua.

.ecran-start {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

Efect vizual în browser

Pe telefon, pagina de prezentare a pensiunii din Bran ocupă exact spațiul vizibil sub bara de adrese, iar butonul „Rezervă acum” se vede jos fără derulare. Cu 100vh, butonul ar fi fost ascuns sub marginea ecranului.

Exemplul 2: Titlu care se adaptează la orice orientare a ecranului

vmin folosește latura mai mică, deci titlul nu devine uriaș în modul peisaj.

.titlu-eveniment {
  font-size: clamp(1.5rem, 8vmin, 4rem);
}

.panou-lateral {
  width: min(320px, 85vw);
  height: 100dvh;
}