O’lchov birliklari va Responsive dizayn — konspekt

Bu modulda o’lchov birliklari va sahifani har qanday ekranga moslash (responsive design) o’rganildi.

Birliklar xaritasi

px — mutlaq birlik: qanday yozilsa, shunday qoladi. U yomon emas — chegara (border: 1px), soya, mayda radiuslar uchun aynan px to’g’ri tanlov. Muammo px’ni hamma joyda ishlatishda. Qolgan asosiy birliklar — nisbiy:

Birlik	Nimaga nisbatan	Odatiy ishlatilishi
`%`	Ota element o’lchamiga	kenglik, maket ustunlari
`em`	Joriy (ota) shrift o’lchamiga	padding, matnga bog’liq bo’shliqlar
`rem`	`html` ildiz shriftiga (odatda 16px)	shrift o’lchamlari, umumiy masshtab
`vw` / `vh`	Ekran kengligi / balandligiga	to’liq ekran bloklar

Foiz (%)

width: 50% — ota element kengligining yarmi. Foiz doim otaga qaraydi: ota torayssa, bola ham torayadi. Shu xossasi uni suyuq (fluid) maketlarning asosiga aylantirgan.

em va rem

em — joriy shrift o’lchamiga bog’liq: font-size: 16px bo’lgan blokda 1.5em = 24px. Muammosi — ichma-ich joylashganda ko’payib boradi: har ichki qavat otasinikidan hisoblayveradi va o’lcham "qochib ketadi".

rem shu muammoni hal qiladi: doim html ildiziga qaraydi, chuqurlik ta’sir qilmaydi:

html { font-size: 16px; }

h1 { font-size: 2rem; }    /* har doim 32px */
p  { font-size: 1rem; }    /* har doim 16px */

Natija: butun sahifa masshtabi bitta joydan — htmlning shriftidan boshqariladi; uni o’zgartirsangiz hammasi proporsional kattalashadi.

Tipik xato. Hamma joyda px ishlatish. Bu foydalanuvchi brauzerda shriftni kattalashtirsa sahifa unamaydi degani; shrift o’lchamlarini remda yozish — ham qulaylik, ham accessibility.

Viewport birliklari

1vw — ekran kengligining 1%, 1vh — balandligining 1%. To’liq ekranli bo’limlar uchun:

.hero {
  height: 100vh;
}

Natija: blok ekranning to’liq balandligini egallaydi — qurilma qanday bo’lishidan qat’i nazar.

Responsive Web Design

RWD — bitta sahifa har qanday ekranda (telefon, planshet, monitor) qulay ko’rinishi. Uch tayanchi: suyuq o’lchamlar (%, max-width), moslashuvchan rasmlar (max-width: 100%) va media query’lar. Boshlashdan oldin <head>da viewport meta bo’lishi shart (HTML kursidan tanish):

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

Media queries

Ekran shartiga qarab boshqa uslub qo’llash:

.container { width: 960px; }

@media (max-width: 768px) {
  .container { width: 100%; }
}

Natija: keng ekranda konteyner 960px; ekran 768px va undan tor bo’lsa — to’liq kenglik.

max-width: 768px — "768 va undan kichik", min-width: 769px — "769 va undan katta". Qoidalar oddiy CSS kabi ustma-ust yoziladi; media ichidagisi shart bajarilgandagina kuchga kiradi.

Breakpoints

Breakpoint — maket o’zgaradigan chegara nuqtasi. Amalda uchta nuqta ko’pchilik loyihaga yetadi:

Oraliq	Qurilma	Odatiy maket
~600px'gacha	telefon	bitta ustun
600–900px	planshet	ikki ustun
900px'dan yuqori	noutbuk/monitor	to’liq maket

Muhim tamoyil: breakpoint’ni qurilmalarga emas, kontentingizga qarab tanlang — maket qaysi kenglikda "buzila boshlasa", chegara o’sha yerda. Brauzer DevTools’idagi qurilma rejimi (Ctrl+Shift+M) turli ekranlarni sinashning eng tez yo’li.

Tipik xato. Sahifani faqat kompyuterda yasab, oxirida "telefonga moslash". Amalda teskarisi oson: avval tor ekran uchun sodda maket (mobile-first), keyin min-width media query’lar bilan keng ekranga boyitish.

Amaliyot

Shrift tizimini remga o’tkazing: html — 16px, h1 — 2rem, p — 1rem; so’ng html’ni 18px qilib butun sahifa masshtabini kuzating.
Ikki divni ichma-ich qo’yib, ikkalasiga ham font-size: 1.5em bering — em’ning ko’payish muammosini o’z ko’zingiz bilan ko’ring, keyin rem bilan tuzating.
100vh balandlikdagi hero blok yasang.
Uch kartali qator tuzing: keng ekranda yonma-yon (har biri ~33%), 768px’dan pastda ustma-ust (100%) — media query bilan.
Brauzer oynasini asta toraytirib, o’z maketingiz qaysi kenglikda buzilishini toping — birinchi haqiqiy breakpoint’ingiz shu.

Modul testidan so’ng oxirgi modul: shriftlar va transformlar.