AXV

Responsiv dizayn

Media so'rovlar: bitta sahifa — telefon, planshet va kompyuterda

8-sinfWeb Full-stack5-hafta · 15-dars

Takrorlash

grid-column: 1 / -1 nima beradi?

−1 — har doim oxirgi chiziq.
01

Responsiv dizayn nima?

Sahifa — suvga o'xshaydi: idish shaklini oladi

Bitta sahifa — uch ekran

< 768px ≥ 768px ≥ 992px

Nega kerak?

Bitta kod

Barcha qurilmalar uchun bitta sahifa.

Telefon

Tashriflarning yarmidan ko'pi — mobil qurilmalardan.

Qidiruv

Google mobilga mos saytlarni yuqoriroq ko'rsatadi.

Viewport meta tegi


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Tegsiz telefon sahifani «kompyuter kengligida» chizib kichraytiradi — media so'rovlar to'g'ri ishlamaydi.

Fluid layout

Qat'iy

width: 1000px — telefonda gorizontal aylantirish.
VS

Oquvchan

width: 90%; max-width: 1000px; margin: 0 auto;

Nisbiy birliklar: %, fr, vw, rem.

02

Media so'rovlar

@media, breakpoint, min va max

Sintaksis


body { background: lightyellow; }

Sintaksis


body { background: lightyellow; }
/* shart bajarilsa — pastdagi qoida ustun keladi */
@media (min-width: 768px) {
  body { background: lightblue; }
}

min-width yoki max-width?

(min-width: 768px)

bosing

Ekran kamida 768px — ya'ni 768 va undan keng.

(max-width: 767px)

bosing

Ekran ko'pi bilan 767px — ya'ni 767 va undan tor.

Oraliq: @media (min-width: 768px) and (max-width: 991px) — faqat planshet.

Breakpointlar

KenglikQurilma
< 576pxtelefon (tik)
≥ 576pxkatta telefon
≥ 768pxplanshet
≥ 992pxnoutbuk
≥ 1200pxkatta monitor

Pastga bosing: qoida

Breakpointni qayerga qo'yish?

Qurilma nomiga emas — dizayn «buzilgan» kenglikka. Oynani asta toraytiring: qayerda noqulay bo'lsa, o'sha yerda breakpoint.

Bu raqamlar Bootstrap'da ham aynan shunday — keyingi mavzularda ko'rasiz.

Mini-test

Ekran 600px. Qaysi qoida ishlaydi?

600 ≤ 767 — max-width sharti bajariladi.
03

Mobile-first

Avval telefon, keyin kattaroq ekranlar

Ikki yondashuv

Mobile-firstDesktop-first
Asosiy CSStelefon uchunkompyuter uchun
Media so'rovmin-widthmax-width
Afzalliksodda asos, zamonaviy standarteski saytni moslashda qulay

1 → 2 → 3 ustun


.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); }
}

Rasmlarni moslashtirish

Toshmasin

img { max-width: 100%; height: auto; } — nisbat saqlanadi.

object-fit

cover — kesib to'ldiradi; contain — to'liq ko'rsatadi.

DevTools'da tekshirish

  1. F12 — asboblar oynasi
  2. Ctrl+Shift+M — Toggle device toolbar
  3. iPhone / iPad tanlang yoki kenglikni sudrang
  4. Har bir breakpointda dizaynni kuzating

Odatiy xatolar

Viewport yo'q

Telefonda sahifa mayda.

Qavs yo'q

@media min-width: 768px — ishlamaydi.

Tartib

@media asosiy qoidadan yuqorida — bosib o'tiladi.

Amaliy topshiriqlar 30 daqiqa

OsonFon telefonda sariq, 768px dan kengda ko'k.
O'rta6 ta karta: 1 → 2 → 3 ustun (mobile-first), rasmlar toshmasin.
Qiyin14-darsdagi maketni moslang: telefonda 1 ustun, menyu ustun.

Dars xulosasi

Asos

Viewport tegi va fluid layout.

@media

Breakpointlar, min-width / max-width.

Mobile-first

Avval telefon; rasmlar max-width: 100%.

Keyingi dars: Responsiv maket va Figma

Dizayn maketidan o'lcham, rang va shriftlarni olish

6-hafta · 16-dars