CSS Units — px, em, rem, %, vw, vh, ch

~20 daq · CSS · Box Model va Matn

Muammodan boshlaylik

Saytingizdagi hamma narsa px da: shrift 16px, sarlavha 32px, bo'shliqlar 20px. Kompyuterda chiroyli.

Keyin ko'rish qobiliyati past foydalanuvchi brauzer sozlamalarida shriftni "Katta" qiladi — va saytingizda hech narsa o'zgarmaydi. Boshqa foydalanuvchi telefonda ochadi — sarlavha juda katta, ekranning yarmini egallaydi. Uchinchisi 27 dyuymli monitorda — matn qatorlari 200 belgidan uzun, o'qish qiyin.

CSS da o'nga yaqin o'lchov birligi bor, va ularning har biri boshqa narsaga nisbatan o'lchaydi. To'g'ri birlikni tanlash — sayt har qanday ekran va sozlamada yaxshi ko'rinishining kaliti.

Absolyut va nisbiy birliklar

• Absolyut — doim bir xil: px (amalda yagona ishlatiladigani)
• Nisbiy — boshqa narsaga nisbatan: shrift o'lchami (em, rem), ota element (%), ekran (vw, vh)

px — piksel

.border { border: 1px solid #e2e8f0; }

• Aniq, oldindan aytib bo'ladi
• Foydalanuvchi shrift sozlamasiga bog'liq emas

[!INFO] CSS dagi 1px — ekrandagi bitta fizik nuqta emas. U "mantiqiy piksel": Retina/HiDPI ekranlarda 1 CSS piksel 2 yoki 3 fizik nuqtaga teng. Shuning uchun 16px matn telefonda ham, 4K monitorda ham taxminan bir xil o'lchamda ko'rinadi.

Qachon: chegaralar (1px), soyalar, ikonkalar, juda kichik aniq detallar.

rem — ildiz shriftiga nisbatan

html {
  font-size: 100%;    /* standart: 16px (foydalanuvchi sozlamasi) */
}

h1  { font-size: 2rem; }      /* 32px */
p   { font-size: 1rem; }      /* 16px */
.sm { font-size: 0.875rem; }  /* 14px */

1rem = <html> elementining shrift o'lchami. Standartda — 16px, lekin foydalanuvchi brauzerda "Katta shrift" ni tanlasa — masalan 20px, va barcha rem qiymatlar proporsional kattalashadi.

Darsning boshidagi 1-muammo hal: shriftlarni rem da yozing.

.card {
  padding: 1.5rem;          /* 24px — shrift bilan birga kattalashadi */
  border-radius: 0.5rem;
  font-size: 1rem;
}

[!WARNING] html { font-size: 16px; } yoki 62.5% hiylalari bilan ildiz o'lchamini qattiq qo'ymang. 16px foydalanuvchi sozlamasini butunlay bekor qiladi. 100% (yoki umuman yozmaslik) — foydalanuvchi tanlovini hurmat qiladi.

Qachon: shrift o'lchamlari, bo'shliqlar (padding, margin, gap), komponent o'lchamlari — asosiy birlik.

em — joriy shriftga nisbatan

.btn {
  font-size: 1rem;
  padding: 0.75em 1.5em;    /* shrift o'lchamiga nisbatan */
}

.btn-lg {
  font-size: 1.25rem;       /* padding avtomatik kattalashadi */
}

1em = shu elementning shrift o'lchami. Tugma kattalashsa — padding ham proporsional kattalashadi, qo'shimcha kod yozmasdan.

em ning tuzog'i — ichma-ich ko'payish

font-size da em ishlatilsa — u ota elementning shriftiga nisbatan bo'ladi va ichma-ich ko'payib ketadi:

li { font-size: 1.2em; }

<ul>
  <li>1-daraja — 19.2px
    <ul>
      <li>2-daraja — 23.04px
        <ul>
          <li>3-daraja — 27.65px  ← o'sib boryapti!</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

rem bunday qilmaydi — u har doim ildizga nisbatan. Shuning uchun:

• font-size uchun — rem
• Komponent ichidagi padding/margin uchun — em (shriftga moslashsin)

% — ota elementga nisbatan

.sidebar { width: 25%; }    /* otaning kengligining chorak qismi */
.main    { width: 75%; }
img      { max-width: 100%; }   /* ota dan kengroq bo'lmasin */

% nimaga nisbatan — xususiyatga bog'liq:

[!INFO] height: 50% ko'pincha "ishlamaydi" — chunki otaning balandligi kontentga qarab belgilanadi (aniq emas). Foiz hisoblash uchun ota balandligi aniq bo'lishi kerak (height: 400px yoki Flex/Grid).

img { max-width: 100%; } — responsive dizaynning eng muhim qatori: rasm o'z konteyneridan hech qachon kengroq bo'lmaydi.

vw, vh — ekran o'lchamiga nisbatan

.hero {
  min-height: 100vh;    /* butun ekran balandligi */
}

.banner-title {
  font-size: 5vw;       /* ekran kengligining 5% */
}

• 1vw = ekran (viewport) kengligining 1%
• 1vh = ekran balandligining 1%
• vmin / vmax — kengligi va balandligidan kichigi / kattasi

Mobil telefonlardagi 100vh muammosi

Telefonda brauzer manzil paneli paydo bo'ladi va yo'qoladi. 100vh ba'zan uni hisobga olmaydi — natijada pastki tugma ekrandan tashqarida qoladi. Yangi birliklar:

.fullscreen {
  min-height: 100dvh;   /* dinamik — panel holatiga moslashadi */
}

To'liq ekranli bloklar uchun bugun — 100dvh (eski brauzerlar uchun oldin 100vh yozib qo'yish mumkin).

[!WARNING] width: 100vw — gorizontal scroll ning tez-tez uchraydigan sababi (10-dars): vw scroll panelining kengligini ham o'z ichiga oladi. Butun kenglik uchun width: 100% ishlating.

ch — belgi kengligi

.article {
  max-width: 65ch;    /* taxminan 65 belgilik qator */
}

input.pin {
  width: 6ch;         /* 6 raqamli kod uchun */
}

1ch = shu shriftdagi "0" raqamining kengligi. Qulay o'qiladigan qator uzunligi — 45–75 belgi. Darsning boshidagi 3-muammo: katta monitorda ham matn max-width: 65ch bilan o'qish uchun qulay kenglikda qoladi.

Qaysi birini qachon

0 uchun birlik yozish shart emas: margin: 0.

Nima uchun shunday?

Nima uchun bunchalik ko'p birlik — hamma narsani px da yozsa bo'lmaydimi?

Chunki veb — qog'oz emas. Bosma dizaynda varaq o'lchami bitta va doim ma'lum; vebda esa sahifa 320px telefondan 3840px monitorgacha, standart shriftdan 200% kattalashtirilgan shriftgacha ko'rinadi — va dizayner ularning birortasini oldindan bilmaydi. Har bir birlik boshqa savolga javob beradi: "foydalanuvchi qanday shrift tanlagan?" (rem), "bu komponent qancha katta?" (em), "konteyner qancha joy beradi?" (%), "ekran qancha?" (vw). To'g'ri birlik bilan siz qiymatni emas, munosabatni yozasiz — va sayt o'zi har qanday holatga moslashadi.

Xulosa

Eslab qoling:

• px — aniq, sozlamaga bog'liq emas; chegaralar va mayda detallar uchun
• rem — ildiz shriftiga nisbatan; shrift va bo'shliqlar uchun asosiy birlik
• em — joriy shriftga nisbatan; font-size da ichma-ich ko'payadi
• % — otaga nisbatan; padding/margin foizi — otaning kengligidan
• vw/vh — ekranga nisbatan; mobil uchun dvh; 100vw o'rniga 100%
• ch — qator uzunligi: max-width: 65ch
• html { font-size } ni qattiq px da qo'ymang

Keyingi dars

12-dars: Font va Text — family, size, weight, align, decoration