Responsiv maket amaliyoti

Mobile-first maket, moslashuvchan o'lchamlar, rasmlar, DevTools tekshiruvi

8-sinfWeb Full-stack6-hafta · 16-dars

Bugun nimalarni o'rganamiz?

Mobile-first asos

Avval telefon

Moslashuvchan rasmlar

Rasm toshmasin

Loyiha: maktab sayti

Uch breakpoint

Takrorlash

@media (min-width: 768px) qachon ishlaydi?

min-width — «shundan boshlab va kengroq».

Mobile-first asos

Avval telefon

Moslashtirish tartibi

Asos va menyu


* { box-sizing: border-box; }
.konteyner { width: 90%; max-width: 1100px; margin: 0 auto; }
h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
.menyu { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 768px) {
  .menyu { flex-direction: row; gap: 24px; }
}

Brauzerda matn o'lchamini piksel bilan qotirib qo'ymang: rem foydalanuvchi sozlamasini hurmat qiladi. Tugmalar telefonda barmoq bilan bosishga qulay bo'lishi uchun kamida 44×44px bo'lsin.

Mini-test

clamp(1.5rem, 5vw, 2.5rem) sarlavha o'lchamini qanday belgilaydi?

clamp — eng kichik, ideal va eng katta qiymat.

Moslashuvchan rasmlar

Rasm toshmasin

Rasm bilan ishlash

Karta va rasm


img { max-width: 100%; height: auto; display: block; }
.karta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kartalar { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) { .kartalar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .kartalar { grid-template-columns: repeat(3, 1fr); } }

object-fit: cover rasmni kesishi mumkin: muhim qismi (masalan, yuz) chetga tushmasligi uchun rasmni tekshiring. Har rasmda alt matnini yozing.

Mini-test

object-fit: cover nima qiladi?

Nisbat saqlanadi, ortiqcha qismi kesiladi.

Loyiha: maktab sayti

Uch breakpoint

Loyiha bosqichlari

Hero va footer


.hero { padding: 2rem 1rem; text-align: center; background: #eef; }
.hero .tugma { display: inline-block; padding: 12px 24px; }
footer { padding: 1rem; text-align: center; }

@media (min-width: 992px) {
  .hero { padding: 5rem 1rem; }
}

Breakpoint qiymatini qurilma nomiga emas, sahifangiz «buzilgan» joyiga qarab tanlang. Odatda 768px va 992px ham yetarli.

Mini-test

Breakpoint ni qanday tanlash to'g'riroq?

Kontent buzilgan joyda breakpoint qo'shiladi.

rem va px

rem

Asosiy shriftga nisbatan; foydalanuvchi sozlamasini hurmat qiladi

px

Qotirilgan piksel; moslashmaydi

Matn va masofalar uchun rem qulay.

Atamalar. Bosing

clamp()

bosing

Eng kichik, ideal va eng katta qiymat

aspect-ratio

bosing

Elementning eni va bo'yi nisbati

object-fit

bosing

Rasm maydonni qanday to'ldirishi

srcset

bosing

Turli o'lchamdagi rasm fayllari ro'yxati

Maket yaratish

1. Telefon

Asos CSS.

2. Planshet

≥768px qoidalari.

3. Kompyuter

≥992px qoidalari.

Qurilma kengliklari

Qurilma	Kenglik	Ustun
Telefon	~375px	1 ustun
Planshet	≥768px	2 ustun
Noutbuk	≥992px	3 ustun
Katta monitor	≥1200px	`max-width` bilan cheklash

Pastga bosing: kengliklar

«Maktab sayti» sahifasi

Semantik HTML yozing: header, hero, 6 ta karta va footer.
Telefon uchun CSS yozing, so'ng 768px va 992px da ustunlar sonini o'zgartiring.
DevTools qurilma rejimida 375, 768 va 1280px da tekshiring.

O'lchamlar


h1 { font-size: 40px; }
img { width: 800px; }

O'lchamlar


h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
img { max-width: 100%; height: auto; }

Responsiv dizayn raqamlarda

breakpoint: telefon, planshet, kompyuter

— 1rem odatiy qiymati

— tugma uchun qulay minimal o'lcham

Kichikdan kattaga: har bosqichda tekshiring.

Amaliy topshiriq 20 daqiqa

OsonMenyu yo'nalishi: Menyu telefonda ustun, 768px dan qator bo'lsin.

OsonSarlavha o'lchami: h1 o'lchami 1.5rem dan 2.5rem gacha ekranga qarab o'zgarsin.

O'rtaRasm toshmasin: Barcha rasmlar konteynerga sig'sin va nisbati buzilmasin.

O'rtaBir xil karta rasmi: Karta rasmlari 16:9 nisbatda bo'lib, maydonni to'ldirsin.

Qiyin1 → 2 → 3 ustun: Kartalar telefonda 1, ≥768px da 2, ≥992px da 3 ustunda bo'lsin.

BonusGorizontal skroll: Tor ekranda gorizontal skroll chiqdi. Qaysi 3 sababni tekshirasiz?

Dars xulosasi

Mobile-first

Avval telefon, keyin min-width.

Moslashuvchan o'lcham

rem, %, clamp().

Rasmlar

max-width, aspect-ratio, object-fit, srcset.

Uyga vazifa: Responsiv «Maktab sayti» sahifasi.

Keyingi dars: Figma

Dizayn asoslari va front-endga tayyorlash

6-hafta · 17-dars