CSS Units (O‘lchov birliklari)

Udemere UI’da elementlarning kengligi, balandligi, shrift hajmi, bo‘shliq (padding, margin) va boshqa ko‘plab xususiyatlarni boshqarishda CSS units ishlatiladi. Bu hujjat W3Schools uslubida yozilgan: tez ko‘rsatma, kategoriyalar, amaliy misollar, tavsiyalar va keng tarqalgan xatolar.

Tez ko‘rsatma (Quick Reference)

Absolyut birliklar (doimiy o‘lchovlar)

px → piksel (eng ko‘p ishlatiladigan)
cm → santimetr
mm → millimetr
in → dyuym (1in = 96px)
pt → punkt (1pt = 1/72in)
pc → pica (1pc = 12pt)

Nisbiy birliklar (moslashuvchan o‘lchovlar)

em → parent element shriftiga nisbatan (1em = 100%)
rem → root (html) shriftiga nisbatan
% → ota element qiymatiga nisbatan
vw → viewport kengligining foizi (1vw = 1%)
vh → viewport balandligining foizi (1vh = 1%)
vmin → viewportning kichik tomonining 1%
vmax → viewportning katta tomonining 1%
ch → shriftning "0" belgisi kengligiga nisbatan
ex → shriftning x balandligiga nisbatan

Misollar

1) Absolyut (`px` bilan)

.box {
  width: 200px;
  height: 100px;
}

2) Nisbiy (`em` va `rem` bilan)

html { font-size: 16px; }
.container { font-size: 1.25rem; } /* 20px */
.text { font-size: 2em; } /* parent font-size ga nisbatan */

3) Viewport birliklari

.hero {
  height: 100vh; /* ekran balandligiga teng */
  width: 100vw;  /* ekran kengligiga teng */
}

4) Foiz birliklari

.parent { width: 400px; }
.child { width: 50%; } /* 200px bo‘ladi */

5) `ch` bilan matn uzunligini cheklash

.article {
  max-width: 60ch; /* ~60 ta belgi kengligi */
}

Tailwind CSS (Udemere Frontend uchun)

px birliklari: w-[200px], h-[120px]
% birliklari: w-1/2, w-full
rem asosida: default 1rem = 16px, Tailwind spacing scale ham shunga asoslangan (p-4 = 1rem = 16px)
Viewport birliklari: h-screen (100vh), w-screen (100vw)
Max-width: max-w-[60ch]

Misol:

<div class="w-1/2 h-screen p-4 text-lg max-w-[60ch]">
  Udemere UI content
</div>

Absolyut vs Nisbiy birliklar

Absolyut (px, cm, pt)	Nisbiy (%, em, rem, vw, vh)
Doimiy, o‘zgarishsiz	Ota element yoki viewportga qarab moslashadi
Pixel-perfect dizaynlar uchun yaxshi	Responsiv dizayn va accessibility uchun ideal
Zoom paytida doim bir xil qoladi	Zoom va shrift scaling bilan moslashadi

Amaliy tavsiyalar

Layout uchun: %, vw, vh, rem ishlating → responsiv dizayn uchun mos.
Font uchun: rem ustuvor, chunki accessibility uchun yaxshi (foydalanuvchi shriftni kattalashtirganda ham moslashadi).
Padding/margin uchun: rem yoki em ishlatish tavsiya etiladi.
Max-width: ch bilan cheklash matn readability’ni yaxshilaydi.

Keng tarqalgan xatolar

Hamma joyda px ishlatish → responsiv dizayn buziladi.
em o‘rniga rem ishlatmaslik → nested font scaling kutilmagan natija beradi.
100vh mobil brauzerlarda muammo → Safari/Chrome’da toolbar sabab 100vh noto‘g‘ri bo‘lishi mumkin, min-h-screen yoki CSS svh birliklari (modern) ishlatish kerak.

Modern birliklar (2023+)

svh, lvh, dvh → viewport height’ni barqaror hisoblaydi (mobil browser toolbarga qarab o‘zgaradi).
svw, lvw, dvw → viewport width uchun ham.

Misol:

.hero { min-height: 100dvh; } /* dynamic viewport height */

Savol-Javob

Q: px bilan rem o‘rtasidagi farq nima? J: px doimiy, responsiv emas. rem esa root font-size ga bog‘liq va moslashuvchan.

Q: Nega em ba’zida kutilmagan natija beradi? J: Chunki u ota elementning font-size ga nisbatan hisoblanadi, nested bo‘lsa bir necha marta kattalashib ketishi mumkin.

Q: Mobile friendly layout qilish uchun eng yaxshi birlik qaysi? J: rem, %, vw/vh kombinatsiyasi.

Yakuniy maslahat

px – tez va aniq, lekin faqat design prototiplari uchun. Haqiqiy web-appda rem, em, %, va vw/vh dan foydalaning. Modern birliklar (dvh, svh) esa mobil UX muammolarini hal qiladi.

Units

On this page