24-dars

O'zing nomla

1. %, vw, vh qachon xavfli?

1️⃣ % — eng ko'p noto'g'ri tushuniladigan birlik

% nimaga nisbatan?

parent element o'lchamiga

viewport emas ❗

.child {
  width: 50%;
}

👉 Bu:

parent aniq bo'lsa → ok

parent noaniq bo'lsa → muammo

❌ Xavfli holat:

.parent {
  display: flex;
}
.child {
  height: 100%;
}

Nega ishlamadi?

Parent'da height yo'q

📌 % faqat parent o'lchami aniq bo'lsa xavfsiz.

2️⃣ vw — viewport width

1vw = ekranning 1%

❌ Katta xato:

h1 {
  font-size: 5vw;
}

Nima bo'ladi?

mobil'da juda kichik

desktop'da juda katta

👉 nazorat yo'q

3️⃣ vh — viewport height (eng xavflisi)

1vh = ekran balandligining 1%

💣 Mobil'da muammo

Mobil brauzer:

address bar bor / yo'q

100vh doim bir xil emas

.hero {
  height: 100vh;
}

❌ Natija:

kontent kesiladi

scroll chiqib ketadi

✅ To'g'riroq:

.hero {
  min-height: 100svh;
}

Yoki:

.hero {
  min-height: 100dvh;
}

2. Zamonaviy viewport birliklari

svh — Small Viewport Height

Eng kichik mumkin bo'lgan viewport balandligi

Ya'ni:

address bar ochiq holat

eng tor holat

min-height: 100svh;

Qachon ishlatiladi?

kontent kesilib qolmasligi kerak bo'lsa

hero / section ichida matn bo'lsa

lvh — Large Viewport Height

Eng katta viewport balandligi

Ya'ni:

address bar yo'q

maksimal balandlik

height: 100lvh;

Qachon ishlatiladi?

vizual effektlar

full-screen animation

background-only section

dvh — Dynamic Viewport Height

Hozirgi holatdagi real viewport

bar ochilsa → kamayadi

yopilsa → kattalashadi

real-time o'zgaradi

min-height: 100dvh;

Qachon ishlatiladi?

SPA

interactive layout

zamonaviy UI