CSS viewport birliklari: vw, vh, dvh va mobil "100vh" muammosi

Qisqacha: Viewport birliklari o'lchamni brauzer oynasiga bog'laydi: 1vw — oyna enining 1 foizi, 1vh — bo'yining 1 foizi. Telefonda manzil paneli aylantirganda yashirinib-chiqadi, 100vh esa panel yashiringandagi bo'yga teng — shuning uchun sahifa ochilganda blokning pasti panel ortida qoladi. Yechim — yangi birliklar: svh (panel ko'rinib turgandagi kichik bo'y), lvh (katta bo'y), dvh (hozirgi bo'y). Birinchi ekran uchun min-height: 100svh yozing. width: 100vw o'rniga esa 100% ishlating — aks holda Windows'da gorizontal skroll paydo bo'ladi.

Bu darsda

• vw, vh, vmin va vmax nimaga teng ekanini hisoblay olasiz.
• Telefonda 100vh nega ekrandan katta chiqishini tushuntirasiz.
• svh, lvh va dvh dan vazifaga mosini tanlaysiz.
• 100vw sabab paydo bo'ladigan gorizontal skrollni topib, tuzatasiz.
• Nega matn o'lchamini faqat vw da bermaslik kerakligini bilasiz.

Oldin bilishingiz kerak: O'lcham birliklari, head anatomiyasi va viewport, Responsive rasmlar I.

1. Nega bu kerak?

Jasur aka «Bahor»ning bosh sahifasini shunday ko'rmoqchi: telefonda saytni ochgan odam avval faqat yashil fonda choyxona nomini va ish vaqtini ko'rsin. Butun ekran — bitta "tabriknoma". Menyu esa pastda, aylantirganda chiqsin.

Buning uchun blok bo'yi ekran bo'yiga teng bo'lishi kerak. O'tgan darsda ko'rdik: height: 100% ishlamaydi, chunki ota bo'yi oldindan noma'lum. px ham yordam bermaydi — telefonlarning bo'yi har xil.

Bizga "ekranning o'zi"ga nisbatan birlik kerak. CSS'da ular bor va ular viewport birliklari deyiladi. Bu darsda ular bilan ishlashni va telefonlardagi mashhur tuzoqni o'rganamiz.

2. Viewport nima?

Viewport — brauzer oynasining sahifa chiziladigan qismi. Manzil qatori, tablar, xatcho'plar paneli unga kirmaydi — faqat sahifa ko'rinadigan to'rtburchak.

Uyingizning derazasini tasavvur qiling. Ko'cha katta, lekin siz uni faqat deraza ramkasi ichidan ko'rasiz. Sahifa — ko'cha, viewport — deraza. Sahifa uzun bo'lsa, siz uni "deraza oldidan o'tkazasiz" — aylantirasiz.

head anatomiyasi darsidagi qatorni eslang:

<meta name="viewport" content="width=device-width, initial-scale=1">

Aynan shu qator telefonda viewport enini qurilma eniga tenglaydi: 360–430 CSS piksel. Usiz telefon sahifani 980 piksellik "kompyuter derazasi"da chizardi. Viewport birliklari to'g'ri ishlashi uchun bu qator albatta bo'lsin.

3. vw va vh

3.1 vw — oyna enining foizi

1vw — viewport enining 1 foizi. 100vw — butun en. Responsive rasmlar I darsida bu birlikni sizes atributida ko'rgan edingiz: sizes="(max-width: 600px) 100vw, 600px" — "rasm ekranning butun enini egallaydi". O'sha yerda "vw ni CSS qismida batafsil ko'ramiz" degan edik. Mana u CSS'da:

<style>
  header {
    padding: 12px 5vw;
    background-color: #2f6b3a;
    color: #fffaf0;
  }
  .aksiya {
    font-size: 6vw;
    color: #b4461a;
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
</header>
<p class="aksiya">Bugun ko'k choy — bepul!</p>

Telefon va kompyuter tugmalarini almashtirib ko'ring. Natija oynasida vw — natija oynasining eniga nisbatan: tugmalar oynani 360, 768 va 1280 piksel qiladi.

Nimaga qarang:

• Yashil blokning chap va o'ng ichki bo'sh joyi ekran bilan o'sadi: telefonda 18 piksel (360 × 5%), kompyuterda 64 piksel (1280 × 5%). Katta ekranda matn chetga yopishmaydi.
• Aksiya matni esa haddan tashqari o'zgaradi: telefonda 21.6 piksel — sarlavhadan kichik, kompyuterda 76.8 piksel — sarlavhadan ikki barobardan katta.

Birinchisi — vw ning to'g'ri ishlatilishi. Ikkinchisi — xavfli, nega ekanini biroz pastda ko'ramiz.

3.2 vh — oyna bo'yining foizi

1vh — viewport bo'yining 1 foizi. height: 100vh — oynaning butun bo'yi. Jasur akaning "tabriknomasi" uchun birinchi urinish shunday bo'lardi:

header {
  height: 100vh;
}

Kompyuterda bu ishlaydi. Telefonda esa bitta tuzoq bor — uni "Mobil 100vh muammosi" bo'limida ochamiz.

Bu darsdagi natija bloklari haqida bitta muhim gap. Kodda vh kabi bo'yga bog'liq birlik bo'lsa, natija oynasining bo'yi 400 pikselda qotib turadi. Shuning uchun natijada vh — shu oynaning bo'yiga nisbatan, telefoningiz ekraniga emas: 100vh — 400 piksel. Haqiqiy natijani ko'rish uchun kodni o'z faylingizga yozib, telefonda oching.

3.3 Matn o'lchami faqat vw da — xavfli

Aksiya matni font-size: 6vw da edi. U ikki sababga ko'ra accessibility'ni buzadi.

Birinchisi — shrift sozlamasi. O'tgan darsda foydalanuvchi Chrome'da shriftni Large qilganda rem o'sishini ko'rdik. vw bu sozlamaga umuman qaramaydi — u faqat oyna eniga bog'liq.

Ikkinchisi — zoom. Hisoblab ko'ramiz. Kompyuter oynasi 1280 piksel, matn 6vw — 76.8 piksel. Foydalanuvchi zoom'ni 200% qiladi. Endi har CSS piksel ekranda ikki barobar katta chiziladi, shuning uchun oynaga faqat 640 CSS piksel sig'adi. Matn: 640 × 6% = 38.4 CSS piksel, ekranda esa 38.4 × 2 = 76.8 — avvalgidek. Zoom bosildi, matn kattalashmadi.

WCAG talabi (1.4.4) — matn 200% gacha kattalashishi kerak. Faqat vw dagi matn bu testdan o'ta olmaydi. Yechim — vw ni rem bilan aralashtirish va chegaralash: clamp(1.5rem, 1rem + 2vw, 3rem). Buni Matematik funksiyalar darsida o'rganamiz.

Tekshirib ko'ring: Telefon viewport'i 360 × 640 CSS piksel. width: 50vw va height: 25vh qancha piksel bo'ladi? font-size: 5vw-chi?

4. vmin va vmax

Telefonni yotqizsangiz, en va bo'y o'rin almashadi. Ba'zan "qaysi tomoni kichik bo'lsa, shunga qarab" o'lchash kerak bo'ladi:

• vmin — vw va vh dan kichigi.
• vmax — ikkalasidan kattasi.

Faraz qiling: «Bahor»da bron qabul qilingach, sahifada QR kod chiqadi va mehmon uni ofitsiant Otabekka ko'rsatadi. Kod ekranga to'liq sig'sin — telefon tik turganda ham, yotganda ham. Ekran 400 × 800 CSS piksel bo'lsin:

60vmin har ikki holatda ham ekranning qisqa tomonidan olinadi. Kvadrat doim sig'adi:

figure {
  width: 60vmin;
  height: 60vmin;
}

vmax kamroq ishlatiladi — masalan, fon bezagi ekranning uzun tomonini ham to'ldirishi kerak bo'lganda.

Tekshirib ko'ring: Telefon ekrani 360 × 780 CSS piksel. 50vmin necha piksel? Telefonni yotqizsangiz-chi?

5. Mobil "100vh" muammosi

5.1 Yashirinib-chiqadigan panel

Telefonda saytni oching va pastga aylantiring. Tepadagi manzil qatori (ba'zi brauzerlarda pastdagi tugmalar paneli ham) yashirinadi — sahifaga ko'proq joy qoladi. Tepaga aylantirsangiz, panel qaytadi. Demak telefonda viewport bo'yi doim o'zgarib turadi.

Endi savol: 100vh qaysi bo'yga teng? Agar u har safar o'zgarsa, aylantirish paytida vh bilan o'lchangan hamma bloklar cho'zilib-qisqarib, sahifa "sakrardi". Mobil brauzerlar buning oldini olish uchun vh ni panel yashiringandagi — eng katta — bo'yga tenglashtirdi.

Natija — mashhur muammo. Sahifa endi ochilganda panel ko'rinib turibdi, height: 100vh blok esa undan balandroq. Uning pastki qismi panel ortida, ekrandan tashqarida qoladi:

flowchart TD
  A["Sahifa ochildi: panel bor"] --> B["100vh blok ekrandan uzun"]
  B --> C["Blokning pasti ko'rinmaydi"]
  C --> D["Foydalanuvchi aylantirdi"]
  D --> E["Panel yashirindi"]
  E --> F["Endi 100vh = ko'rinadigan bo'y"]

Nimaga qarang: blok faqat panel yashiringandan keyin ekranga roppa-rosa sig'adi. Birinchi taassurot esa — ochilgan paytdagi ekran. Tugma yoki "pastga aylantiring" yozuvi blokning pastki chetiga qo'yilgan bo'lsa, u aynan birinchi ekranda ko'rinmay qoladi. (Kontentni blok pastiga joylashni Flexbox darslarida o'rganamiz.)

5.2 Uch yangi birlik: svh, lvh, dvh

Muammoni hal qilish uchun CSS'ga viewport'ning uch xil o'lchami qo'shildi:

• svh (small — kichik) — panellar ko'rinib turgandagi bo'y. Eng kichik holat.
• lvh (large — katta) — panellar yashiringandagi bo'y. Eski vh shunga teng.
• dvh (dynamic — o'zgaruvchan) — hozirgi bo'y: panel yashirinsa, kattalashadi, qaytsa, kichrayadi.

Kompyuterda panellar yashirinmaydi, shuning uchun u yerda to'rttasi bir xil.

Xuddi shu old qo'shimchalar — s, l, d — boshqa viewport birliklariga ham qo'shiladi: svw, lvw, dvw, svmin, dvmax kabi. Yana vi va vb bor — matn yo'nalishi bo'yicha en va bo'y; o'zbekcha matnda vi = vw, vb = vh. Bu nomlarni yodlash shart emas: amalda eng ko'p kerak bo'ladigani — svh va dvh.

Baseline ma'lumotlariga ko'ra, svh, lvh, dvh va ularning oilasi 2022-yil dekabridan beri to'rt asosiy brauzerning hammasida ishlaydi, 2025-yil o'rtasidan beri esa "keng tarqalgan" (Widely available) holatida. Lekin eski, yangilanmagan telefonlar hali ham uchraydi — zaxira yozing (qanday — pastdagi «Bahor» yechimida).

5.3 Qaysi birini tanlash?

• svh — ko'p holatda eng xavfsiz tanlov. Blok birinchi ekranga doim sig'adi va aylantirganda sakramaydi. «Bahor»ning "tabriknomasi" uchun aynan shu.
• dvh — ekranni roppa-rosa to'ldirishi shart bo'lgan joylarda: chat oynasi, xarita, to'liq ekranli ilova ko'rinishi. Kamchiligi: panel harakatlanganda blok bo'yi o'zgaradi va ostidagi hamma narsa suriladi. Oddiy matnli sahifada bu o'quvchini bezovta qiladi.
• lvh — kamdan-kam. Panel ortiga ham cho'zilishi kerak bo'lgan fon bezagi uchun.

Yana bir qoida: height emas, min-height yozing. Ma'nosi — "kamida bir ekran, kontent ko'p bo'lsa — undan ham baland". O'tgan darsdagi shrift sozlamasini eslang: kichik telefonda, Large shriftda matn bir ekranga sig'masligi mumkin. Shunda height bilan matn blokdan toshib chiqardi, min-height bilan esa blok o'zi cho'ziladi. Bu xususiyatni O'lchamlar darsida batafsil ko'rasiz.

5.4 «Bahor» tabriknomasi — to'g'ri yechim

<style>
  body {
    margin: 0;
  }
  header {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #2f6b3a;
    color: #fffaf0;
  }
  header > * {
    margin: 0;
    padding: 0.5rem 1rem;
  }
  main {
    padding: 0 1rem;
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
  <p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
</header>
<main>
  <h2>Bugungi menyu</h2>
  <p>Osh — 35 000 so'm</p>
</main>

Nimaga qarang: yashil blok natija oynasining butun bo'yini egallaydi. Menyuni ko'rish uchun oyna ichida pastga aylantiring — u "keyingi ekranda". Telefonda esa blok ochilgan paytdagi ekranga roppa-rosa teng bo'ladi.

Uch nozik joy:

• Ikki min-height qatori — zaxira. CSS nima darsidan: brauzer tushunmagan qatorni tashlab ketadi. Eski brauzer 100svh ni tushunmaydi va 100vh da qoladi. Yangisi ikkalasini o'qiydi, pastdagisi yutadi.
• body { margin: 0; } — brauzer body atrofiga 8 piksel tashqi bo'sh joy qo'yadi. Usiz yashil blok atrofida oq chiziq qolardi.
• header > * — ichki bo'sh joyni blokning o'ziga emas, bolalariga berdik. Nega — Box model va box-sizing darslarida tushunasiz: padding blok bo'yiga qo'shiladi va u ekrandan uzun bo'lib qoladi.

Tekshirib ko'ring: Xarita ilovasi ekranni to'liq to'ldirishi kerak: pastda ham, tepada ham bo'sh joy qolmasin, panel yashirinsa ham. Qaysi birlik mos: 100svh, 100lvh yoki 100dvh?

6. 100vw va gorizontal skroll

6.1 Muammo

Aksiya lentasini butun en bo'ylab cho'zmoqchimiz. Mantiqan width: 100vw to'g'ridek:

<style>
  body {
    margin: 0;
  }
  .aksiya {
    width: 100vw;
    background-color: #b4461a;
    color: #fffaf0;
  }
  main {
    height: 1000px; /* uzun sahifa o'rniga */
  }
</style>
<p class="aksiya">Bugun ko'k choy — bepul!</p>
<main>
  <h2>Bugungi menyu</h2>
</main>

Windows kompyuterda natija oynasiga qarang: o'ng tomonda tik skrollbar, pastda esa gorizontal skrollbar ham paydo bo'ldi. Sahifani o'ngga surish mumkin — aksiya lentasining oxiri tik skrollbar ostiga kirib ketgan. Telefonda yoki macOS'da esa hech narsa ko'rinmaydi.

6.2 Nega?

100vw — viewport'ning to'liq eni, skrollbar bilan birga. Sahifa uzun bo'lsa, Windows'da skrollbar o'ng chetdan joy oladi va sahifaga kamroq en qoladi. Lekin 100vw buni hisobga olmaydi.

Windows 11'dagi Chrome'da o'lchadik: natija oynasi 668 piksel keng edi, skrollbar 15 pikselni oldi va sahifaga 653 piksel qoldi. 100vw esa 668 piksel — 15 piksel ortiqcha. Shu 15 piksel gorizontal skroll beradi.

Telefonda va macOS'da (odatiy sozlamada) skrollbar sahifa ustida suzib yuradi va joy egallamaydi, shuning uchun xato ko'rinmaydi. Mac'da ishlaydigan dasturchi uni sezmasligi mumkin, Windows'dagi foydalanuvchi esa har sahifada ko'radi.

body ning standart 8 piksellik margin i ham xuddi shunday xato beradi — hatto skrollbarsiz. Element chapdan 8 piksel ichkarida boshlanadi, 100vw uzunlikda davom etadi va o'ng chetdan 8 piksel chiqib ketadi.

6.3 Tuzatish

Blok element eni o'zi ota enini to'liq egallaydi — hech narsa yozish shart emas. Aniq kerak bo'lsa, width: 100% yozing: foiz skrollbarsiz qolgan joydan olinadi. Natijadagi "Tahrirlab ko'rish" bilan 100vw ni 100% ga almashtiring — gorizontal skroll yo'qoladi.

Internetda boshqa "yechim"ni ham uchratasiz: body { overflow-x: hidden; } — gorizontal skrollni taqiqlash. U kasallikni emas, belgisini yashiradi: chiqib ketgan qism endi shunchaki kesiladi. overflow ni Overflow darsida o'rganamiz.

Tekshirib ko'ring: Sahifa qisqa — bir ekranga sig'adi, tik skrollbar yo'q. body ga margin: 0 berilgan. width: 100vw blok gorizontal skroll beradimi?

7. DevTools'da sinash

Viewport birliklarini sinashning tez yo'li — DevTools'ning qurilma rejimi: F12, keyin Ctrl + Shift + M (Chrome DevTools I). Tepadagi ro'yxatdan telefon tanlang yoki oyna enini sichqoncha bilan torting — vw dagi o'lchamlar darhol o'zgaradi. Computed yorlig'ida ularning pikseldagi qiymatini ko'rasiz (DevTools'da CSS).

Lekin bitta cheklov bor. Qurilma rejimi manzil panelini chizmaydi. Chrome'da tekshirdik: telefon rejimida 100svh, 100lvh, 100dvh va 100vh — hammasi bir xil. svh va dvh farqini faqat haqiqiy telefonda ko'rasiz. Eng oson yo'l — sahifani internetga joylab (Birinchi deploy), telefonda ochish va aylantirib ko'rish.

8. Ko'p uchraydigan xatolar

8.1 height: 100vh birinchi ekran

Telefonda blokning pasti panel ortida qoladi. Tuzatish: min-height: 100vh; min-height: 100svh; — zaxira bilan.

8.2 width: 100vw

Windows'da gorizontal skroll, body margin bilan — hamma joyda. Tuzatish: width ni o'chiring yoki 100% yozing.

8.3 height o'rniga min-height kerak edi

height: 100svh blokda matn ko'p bo'lsa yoki shrift kattalashtirilsa, kontent blokdan toshib chiqadi. Tuzatish: min-height.

8.4 Matn faqat vw da

Zoom va shrift sozlamasiga javob bermaydi, katta ekranda ulkan bo'lib ketadi. Tuzatish: clamp() va rem aralashmasi (Matematik funksiyalar).

8.5 Faqat kompyuterda sinash

DevTools qurilma rejimi svh va dvh farqini ko'rsatmaydi. Tuzatish: birinchi ekranni haqiqiy telefonda, aylantirib ko'ring.

9. Mashqlar

1-mashq (oson): Hisoblang

Viewport — 400 × 700 CSS piksel (panellar yo'q, shuning uchun vh = svh = dvh).

• width: 25vw → px
• height: 50vh → px
• width: 50vmin → px
• width: 10vmax → px

2-mashq (o'rta): Stajyorning tabriknomasi

Stajyor «Bahor» uchun shunday yozdi. Kompyuterda hammasi yaxshi, lekin Jasur aka telefonda "matn kesilib qolyapti va o'ngga suriladi" dedi:

header {
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background-color: #2f6b3a;
}
header h1 {
  font-size: 12vw;
}

Uchta muammoni toping va CSS'ni qayta yozing. Sarlavha shrifti hozircha rem da bo'lsin — vw ni rem bilan aralashtirishni Matematik funksiyalar darsida o'rganamiz.

Ishora: "Qaysi birini tanlash?", "100vw va gorizontal skroll" va "Matn o'lchami faqat vw da" bo'limlarini eslang. width kerakmi o'zi?

body {
  margin: 0;
}
header {
  min-height: 100vh;
  min-height: 100svh;
  background-color: #2f6b3a;
}
header > * {
  margin: 0;
  padding: 0.5rem 1rem;
}
header h1 {
  font-size: 2.25rem;
}

3-mashq (qiyin): Qaysi birlik?

Har vazifa uchun birlik tanlang va bir gap bilan asoslang:

1. Chat ilovasi: xabarlar ro'yxati ekranni to'liq to'ldiradi, pastdagi yozish maydoni doim ko'rinib turadi.
2. Choyxona haqidagi sahifa boshida katta surat: birinchi ekranning kamida yarmi.
3. Mehmonga ko'rsatiladigan QR kod: telefon tik ham, yotiq ham bo'lishi mumkin.
4. Sahifa chap va o'ng chetidagi bo'sh joy: katta ekranda ko'proq bo'lsin.

4-mashq: Portfolio qadami — 404 sahifasi ekranga moslashadi

Portfoliongizdagi 404 sahifasida xabar ekranning eng tepasiga yopishib turibdi. Uni biroz pastroqqa tushiring: ekran bo'yining 20 foizi.

1. asosiy.css ga faqat 404 sahifasining main ini tanlaydigan qoida yozing.
2. Tepadagi ichki bo'sh joy — ko'rinadigan bo'yning 20 foizi. Aylantirganda sakramasin. Eski brauzer uchun zaxira ham yozing.
3. Faylda 100vw borligini tekshiring (Ctrl + F). Bo'lsa — almashtiring.
4. Sahifani DevTools qurilma rejimida, keyin telefoningizda oching.

Ishora: Yakuniy loyiha darsidagi 404.html ni boshqa sahifalar bilan solishtiring: hamma sahifada <main id="asosiy">, 404 da esa main ning id si yo'q. "Atributi yo'q" degan shartni :not() bilan yozish mumkin (Mantiqiy pseudo-klasslar), atribut selektori — Atribut selektorlari darsidan.

/* 404: id'si yo'q main — faqat 404.html da */
main:not([id]) {
  padding-top: 20vh;
  padding-top: 20svh;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1 { color: #1f6f4a; }
  main:not([id]) {
    padding-top: 20vh;
    padding-top: 20svh;
  }
</style>
<main>
  <h1>Kechirasiz, bu sahifa topilmadi</h1>
  <p>Manzil noto'g'ri yozilgan yoki sahifa ko'chirilgan
  bo'lishi mumkin.</p>
  <ul>
    <li><a href="/">Bosh sahifaga qaytish</a></li>
    <li><a href="/loyihalar/">Loyihalarim</a></li>
  </ul>
</main>

10. Real ishda

• Landing sahifalar (bitta mahsulot yoki xizmatni tanishtiradigan sahifa) deyarli har doim "birinchi ekran" (hero) bloki bilan boshlanadi. Unda min-height: 100svh yoki 100dvh — zamonaviy standart. Eski loyihalarda 100vh ni va uni JavaScript bilan "tuzatadigan" kodni uchratasiz — yangi birliklardan oldin shunday qilishardi.
• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) h-screen (100vh) bilan birga h-svh, h-dvh, min-h-svh kabi class'larni ham beradi.
• Telefondagi klaviatura ochilganda viewport yana o'zgaradi — bu alohida mavzu, uni Mobil qurilma tuzoqlari darsida ko'ramiz.
• Intervyuda so'raladi: "100vh telefonda nega muammo? dvh va svh farqi nima?", "Nega 100vw gorizontal skroll beradi?". Bu darsdan keyin ikkalasiga ham javob bera olasiz.

Xulosa

• vw/vh — viewport eni/bo'yining foizi; otaga emas, oynaga bog'liq. vmin/vmax — qisqa/uzun tomon.
• Telefonda vh panel yashiringandagi katta bo'yga teng — shuning uchun 100vh blok birinchi ekranda kesiladi.
• svh — kichik (panel bor), lvh — katta, dvh — hozirgi bo'y. Birinchi ekran uchun odatda min-height: 100svh, zaxira bilan.
• 100vw skrollbarni ham o'z ichiga oladi — width: 100% ishlating yoki width ni umuman yozmang.
• Matn o'lchamini faqat vw da bermang: zoom va shrift sozlamasi ishlamay qoladi.

Keyingi dars: Ranglar 1: nomli, hex, rgb, hsl va shaffoflik — «Bahor» ranglarining kodini o'qishni, rgb() va hsl() yozuvlarini va shaffof rang berishni o'rganamiz. Undan keyingi darsda esa clamp() bilan o'lchamlarni chegaralaymiz.

Manbalar

• MDN: "length" (viewport-percentage lengths), "Viewport concepts" — developer.mozilla.org
• W3C: "CSS Values and Units Module Level 4", "Viewport-percentage lengths" bo'limi — w3.org/TR/css-values-4
• web.dev: "The large, small, and dynamic viewport units" — web.dev/blog/viewport-units
• web-features (Baseline ma'lumotlari): "Small, large, and dynamic viewport units" — github.com/web-platform-dx/web-features