DarslarWeb dasturlash

Media Responsive — asoslar

Sayt har qanday ekranda chiroyli bo'lishi uchun media query'lar, viewport va mobile-first yondashuv bilan tanishuv.

40 daqiqa

CSS Advanced — Dars 16

Media Responsive

Bir sayt — 1000 xil ekran. Telefon, planshet, noutbuk va katta monitor — hammasida chiroyli ko'rinsin.

@mediaviewportbreakpointmobile-first

Dars rejasi

6 ta mavzu

01Responsive nima?
02viewport meta-tegi
03@media query sintaksisi
04Asosiy breakpointlar
05Mobile-first yondashuv
06Nisbiy o'lchov birliklari

1. Responsive nima?

Responsive sayt — bu ekran kattaligiga qarab o'zini o'zgartiradigan sayt. Bitta HTML va bitta CSS — lekin telefonda bir ustun, planshetda ikki ustun, noutbukda to'rt ustun bo'lib ko'rinadi.

Adaptiv layout

Sahifaning tuzilishi ekranga qarab o'zgaradi: ustunlar qayta joylashadi.

Moslashuvchan matn

Shrift telefonda kichikroq, katta ekranda kattaroq bo'ladi — o'qish qulay.

Media fayllar

Rasmlar va videolar o'z konteynerini aniq to'ldiradi, chetdan chiqib ketmaydi.

Tezlik

Telefonda keraksiz og'ir elementlar yashiriladi — sayt tezroq ochiladi.

2. viewport meta-tegi

Responsive ishlashi uchun birinchi qadam — HTML'ning <head> qismiga viewport meta-tegini qo'yish. Busiz telefonda sayt kichraytirilgan noutbuk varianti sifatida chiqadi.

index.html

1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <title>Mening responsive saytim</title>
5</head>

3. @media query sintaksisi

@media — shart. «Agar ekran shunday bo'lsa, quyidagi CSS qoidalarini qo'llaymiz» degani. Uning asosiy ko'rinishi:

1/* Agar ekran kengligi 768px dan kichik bo'lsa */
2@media (max-width: 768px) {
3  body {
4    background: #fef3c7;
5  }
6  h1 {
7    font-size: 24px;
8  }
9}
10
11/* Agar ekran kengligi 1024px dan katta bo'lsa */
12@media (min-width: 1024px) {
13  body {
14    background: #dbeafe;
15  }
16}

max-width: X — ekran X yoki undan kichik bo'lsa.
min-width: X — ekran X yoki undan katta bo'lsa.
orientation: portrait — telefon tik turganda.
orientation: landscape — ekran yotqizilganda.

@media'ni sinab ko'ring — preview o'lchamini o'zgartiring

HTML

Natijajonli

4. Asosiy breakpointlar

Breakpoint — layout o'zgarishi kerak bo'lgan ekran kengligi. Hamma uchun bir xil majburiy qoida yo'q, lekin sanoat standarti bor:

1/* Mobile (default, media kerak emas) */
2.box { width: 100%; }
3
4/* Katta telefon / kichik tablet */
5@media (min-width: 640px)  { /* sm */ }
6
7/* Tablet */
8@media (min-width: 768px)  { /* md */ }
9
10/* Noutbuk */
11@media (min-width: 1024px) { /* lg */ }
12
13/* Katta ekran */
14@media (min-width: 1280px) { /* xl */ }
15
16/* Juda katta ekran */
17@media (min-width: 1536px) { /* 2xl */ }

5. Mobile-first yondashuv

Ikki xil yondashuv bor: desktop-first (avval noutbuk uchun yozib, keyin telefonga kichraytirish) va mobile-first (avval telefon uchun yozib, keyin ekran kattalashgan sari qo'shimcha qilish). Mobile-first — bugungi kun standarti.

Mobile-first (tavsiya)

Asosiy CSS — telefon uchun. min-width bilan kattaroq ekranlarga qo'shimcha qilasiz. Kod toza va aniq.

Desktop-first

Asosiy CSS — noutbuk uchun. max-width bilan telefonga kichraytirasiz. Eskicha, ko'proq qoidalar overrride qilinadi.

1/* Mobile-first (to'g'ri yo'l) */
2.wrap {
3  display: flex;
4  flex-direction: column;   /* mobile: ustma-ust */
5  gap: 12px;
6}
7
8@media (min-width: 768px) {
9  .wrap {
10    flex-direction: row;    /* tablet+: yonma-yon */
11  }
12}

6. Nisbiy o'lchov birliklari

Responsive saytda px ko'p joyda yomon. Chunki px qat'iy. Nisbiy birliklar esa ekranga moslashadi.

%

Ota elementga nisbatan. width: 50% → otaning yarmini egallaydi.

em / rem

em — ota matn o'lchamiga nisbatan, rem — html'ning matn o'lchamiga (odatda 16px).

vw / vh

1vw = ekran enining 1%. 1vh = ekran balandligining 1%. 100vh — to'liq ekran.

1.hero {
2  min-height: 100vh;      /* to'liq ekran balandligi */
3  padding: 5vw;           /* ekran kengligining 5% */
4  font-size: 1.25rem;     /* 16 * 1.25 = 20px, lekin moslashuvchan */
5}
6
7/* Zamonaviy sehr: clamp() */
8h1 {
9  font-size: clamp(24px, 5vw, 56px);
10  /*           min     ideal   max  */
11}

clamp() bilan responsive sarlavha

HTML

Natijajonli

Kichik test

0 / 4

1.Sayt telefonda to'g'ri ko'rinishi uchun birinchi qanday qadam kerak?

2.Mobile-first yondashuvda qaysi qoida ishlatiladi?

3.100vh — bu nima?

4.clamp(16px, 2vw, 24px) nima qiladi?

Mustaqil ish

0 / 5