CSS media queries: sintaksis, range syntax va breakpointlar

Qisqacha: Media query — "shart bajarilsa, shu qoidalarni qo'lla" degan CSS bloki: @media (width >= 40rem) { ... }. Ichidagi qoidalar faqat ekran eni 40rem (640px) va undan keng bo'lganda ishlaydi. Zamonaviy range syntax (>=, <) eski min-width / max-width dan aniqroq: kasrli enlarda "teshik" qoldirmaydi. Breakpointlarni rem da, kontent buziladigan joyga qo'ying.

Bu darsda

• @media qoidasini yozasiz va uning har qismini nomlaysiz.
• min-width / max-width ni range syntax'ga (width >= 40rem) o'girasiz va nega u aniqroq ekanini ko'rsatasiz.
• and, vergul, not, only va orientation bilan shart tuzasiz.
• Breakpointni nega rem da yozish kerakligini o'lchov bilan asoslaysiz.
• Kontentga qarab breakpoint tanlaysiz va <link media> qanday ishlashini bilasiz.

Oldin bilishingiz kerak: Responsive dizayn tamoyillari, O'lcham birliklari, Grid'ga kirish, grid-template-areas.

1. Nega bu kerak?

O'tgan darsda «Bahor» sahifasini foizli to'rga o'girdik. Kompyuterda chiroyli bo'ldi, telefonda esa aksiya paneli 112 piksellik tor ustunga qisilib qoldi. Foiz nisbatni saqlaydi, lekin tuzilishni o'zgartira olmaydi. Bizga "telefonda — bitta ustun, keng ekranda — ikkita" kerak.

Bu — shart: "ekran shundan keng bo'lsa". CSS'da shartlar media query bilan yoziladi.

Siz ularni allaqachon uchratgansiz. Favicon darsida SVG ichida @media (prefers-color-scheme: dark) bor edi. Ranglar 2 darsida @media (color-gamut: p3) ni ko'rdingiz. grid-template-areas darsida esa @media (width >= 40rem) bilan layout qayta chizilgan va "sintaksisini media queries darsida ochamiz" degan edik. Mana o'sha dars.

Choyxonadagi tartibni eslang: "soat 12 dan 15 gacha — tushlik menyusi". Qoida doim yozilgan, lekin faqat shart to'g'ri kelganda ishlaydi.

2. Birinchi media query

2.1 Panelni menyu ostiga tushiramiz

Avval hamma ekran uchun oddiy stil yozamiz: bitta ustun. Keyin shart bilan keng ekranga ikki ustun qo'shamiz:

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  div {
    display: grid;
    gap: 1rem;
  }
  main {
    background-color: #e8f1ec;
  }
  aside {
    background-color: #b4461a;
    color: #fffaf0;
  }
  @media (width >= 40rem) {
    div {
      grid-template-columns: 2fr 1fr;
    }
  }
</style>
<div>
  <main>
    <h1>Menyu</h1>
    <p>Osh — 35 000 so'm</p>
  </main>
  <aside>
    <p>Bugun ko'k choy — 5 000 so'm!</p>
  </aside>
</div>

Tugmalar natija oynasining enini o'zgartiradi — media query oyna eniga qaraydi. Nimaga qarang:

• 360 piksel: aksiya paneli menyu ostida, butun en bo'ylab (344 piksel). Matn bitta qatorga sig'di.
• 768 va 1280 piksel: ikki ustun, 2 ga 1 nisbatda. 768 da menyu 490.7, panel 245.3 piksel.

O'lchadik: oyna 639 piksel bo'lganda hali bitta ustun, 640 da — ikki ustun. 40rem = 40 × 16 = 640 piksel. Chegara — roppa-rosa shu yerda.

2.2 Qismlarining nomi

@media (width >= 40rem) {
  div {
    grid-template-columns: 2fr 1fr;
  }
}

• @media — CSS nima darsida tanishgan @-qoidalardan biri. "Media" — sahifa ko'rsatiladigan muhit: ekran, printer.
• (width >= 40rem) — media xususiyati (media feature): muhitning biror o'lchami va shart. Doim qavs ichida.
• Jingalak qavs ichida — oddiy CSS qoidalari, xuddi fayldagidek. Ular faqat shart to'g'ri bo'lganda qo'llanadi.

Shart bajarilsa, ichidagi qoidalar fayldagi oddiy qoidalar kabi kaskadga qo'shiladi (Kaskad), bajarilmasa — yo'qdek. Media query qo'shimcha "og'irlik" bermaydi — buning tuzog'ini xatolar bo'limida ko'ramiz. Brauzer shartni doim kuzatadi: oyna o'zgarsa yoki zoom qilinsa, sahifa darhol qayta chiziladi.

flowchart TD
  O["Sahifa ochildi, oyna eni<br/>o'zgardi yoki zoom"] --> S{"Shart<br/>bajariladimi?"}
  S -->|Ha| K["Blok qoidalari<br/>kaskadga qo'shiladi"]
  S -->|Yo'q| Y["Blok yo'qdek"]
  K --> C["Sahifa qayta chiziladi"]
  Y --> C

Nimaga qarang: shart bir marta emas, har o'zgarishda qayta tekshiriladi. Shuning uchun natija oynasidagi tugmalarni bosganingizda ko'rinish darhol almashadi.

Tekshirib ko'ring: html shrifti 16px. @media (width >= 48rem) necha pikseldan boshlab ishlaydi? 768 piksellik planshetda ishlaydimi?

3. min-width, max-width va range syntax

3.1 Eski yozuv

Biz yozgan (width >= 40rem) — range syntax (oraliq yozuvi): shart maktab matematikasidagi >=, < belgilari bilan yoziladi. Eski kodda esa en sharti boshqacha — min- va max- so'zlari bilan:

min-width — "kamida shuncha en", ya'ni pastki chegara — Matematik funksiyalar darsidagi min() ga teskari. Range syntax'dagi >= da esa adashib bo'lmaydi.

3.2 Eski yozuvdagi "teshik"

Eski uslubda "telefon" va "kompyuter" qoidalari ko'pincha shunday ajratilardi:

@media (max-width: 639px) {
  /* telefon */
}

@media (min-width: 640px) {
  /* keng ekran */
}

Hamma enlar qamrab olingandek. Lekin zoom'da CSS eni kasr bo'ladi (Responsive dizayn tamoyillari). Windows 11'dagi Chrome'da 110% zoom'da CSS eni 639.29 piksel chiqdi:

Ikki eski shartning ikkalasi ham ishlamadi — sahifa na telefon, na kompyuter stilini oldi. Range syntax'da < va >= bir-birini aniq to'ldiradi: bitta son, orada teshik yo'q.

3.3 Ikki tomonlama oraliq

"Planshet oralig'i" — 40rem dan 64rem gacha:

@media (40rem <= width < 64rem) {
  aside {
    font-size: 0.875rem;
  }
}

Maktabdagi tengsizlik kabi o'qiladi: "40rem kichik yoki teng en, en esa 64rem dan kichik". Eski yozuvda buning uchun ikki shart va and kerak edi: (min-width: 40rem) and (max-width: 63.99rem).

Quyidagi natijada bitta paragraf uchta holatni ko'rsatadi. Matn ::after bilan qo'yilgan (Pseudo-elementlar):

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #e8f1ec;
  }
  p::after {
    content: "Telefon: 40rem dan tor";
  }
  @media (40rem <= width < 64rem) {
    body {
      background-color: #fffaf0;
    }
    p::after {
      content: "Planshet: 40rem dan 64rem gacha";
    }
  }
  @media (width >= 64rem) {
    body {
      background-color: #2f6b3a;
      color: #fffaf0;
    }
    p::after {
      content: "Kompyuter: 64rem va undan keng";
    }
  }
</style>
<p>Hozirgi oyna — </p>

Nimaga qarang: 360 da yashil-och fon va "Telefon", 768 da qaymoq fon va "Planshet", 1280 da to'q yashil fon va "Kompyuter". Birinchi holat uchun shart yozmadik — u odatiy stil, qolgan ikkitasi ustidan yoziladi. Bu tartib keyingi darsning asosiy g'oyasi.

3.4 Baseline

Baseline ma'lumotiga (web-features) ko'ra, range syntax 2023-yil martidan beri hamma asosiy brauzerda ishlaydi, 2025-yil sentabridan esa "keng tarqalgan" (Widely available) holatida. Kursda bundan buyon faqat range syntax yozamiz. Eski min-width ni o'qiy olishingiz kerak — ko'p loyiha va kutubxonada hali shu yozuv.

Operatorlar: <, <=, >, >= va =. Bo'sh joy ixtiyoriy: (width>=40rem) ham ishlaydi (Chrome'da tekshirdik). Lekin o'qish uchun bo'sh joy qo'ying.

Tekshirib ko'ring: (min-width: 30rem) and (max-width: 50rem) ni range syntax'da yozing.

4. Breakpoint birligi: px yoki rem?

4.1 Media query'da rem nimaga teng

Breakpoint — layout o'zgaradigan en: shartdagi son. Uni px, em yoki rem da yozish mumkin. O'lcham birliklari darsidan eslang: rem — html ning shrifti. Media query'da esa bitta farq bor.

Media query'dagi rem va em sizning CSS'ingizga qaramaydi. U brauzerning boshlang'ich shriftidan olinadi — ya'ni foydalanuvchi sozlamasidagi shriftdan. Chrome'da tekshirdik: html { font-size: 62.5%; } yozdik (html shrifti 10px bo'ldi), lekin (width >= 40rem) baribir 640 pikselda ishga tushdi. Shu sabab media query'da em va rem bir xil.

4.2 Nega bu yaxshi — o'lchadik

Chrome'ning shrift sozlamasini (O'lcham birliklari darsidagi Settings → Appearance → Font size) o'zgartirib, 703 piksellik oynada ikki shartni solishtirdik:

Large shriftda matn 25% katta va 703 piksellik oynada ikki ustunga joy yetmaydi. rem breakpoint buni "sezadi" va bitta ustun qoldiradi. px breakpoint esa katta matnni tor ustunga siqadi.

4.3 Zoom haqidagi eski gap

Eski maqolalarda "em breakpoint zoom'da yaxshiroq" degan gap bor. Chrome'da tekshirdik: zoom 200% da px va rem shartlari bir xil ishladi — ikkalasi ham toraygan layout viewport'ga qaraydi. Haqiqiy farq shrift sozlamasida.

Qaror: breakpointlar rem da. Kursda — 40rem (640px) va 64rem (1024px). Pikselga o'girish — 16 ga ko'paytirish.

Tekshirib ko'ring: Foydalanuvchi shriftni Large (20px) qilgan. @media (width >= 64rem) necha pikseldan ishlaydi? Sahifadagi html { font-size: 18px; } bunga ta'sir qiladimi?

5. Mantiqiy operatorlar va boshqa shartlar

5.1 and, vergul, not

Vergul — bir necha mustaqil so'rovlar ro'yxati, ulardan biri to'g'ri kelsa blok ishlaydi. Yangi brauzerlarda shu ma'noda or so'zini ham yozish mumkin: (width < 40rem) or (orientation: portrait).

5.2 Media turlari va only

Shart oldida media turi turishi mumkin: screen (ekran), print (chop etish) yoki all (hammasi). Yozilmasa — all.

@media print {
  nav {
    display: none;
  }
}

@media screen and (width >= 40rem) {
  aside {
    border-left: 4px solid #2f6b3a;
  }
}

Birinchi blok — sahifa printerga chiqarilganda menyuni yashiradi. Chop etish stilini Foydalanuvchi afzalliklari darsida to'liq ko'ramiz.

Eski koddagi only screen and (...) dagi only — juda eski brauzerlar uchun qo'shilgan edi. Bugun u hech narsa o'zgartirmaydi.

5.3 orientation va boshqa xususiyatlar

orientation: portrait — oyna bo'yi enidan katta yoki teng, landscape — aksincha. U qurilma haqida emas, oyna shakli haqida. Kompyuterda tor va baland oyna ham portrait. Chrome'da tekshirdik: 768 × 800 oynada (orientation: portrait) bajarildi.

Boshqa xususiyatlar: height va aspect-ratio (oyna bo'yi va nisbati), resolution (ekran zichligi), hover va pointer (sichqoncha yoki barmoq), prefers-color-scheme (foydalanuvchi sozlamasi). Oxirgilarini Foydalanuvchi afzalliklari darsida ko'ramiz. Layout uchun deyarli doim width yetadi.

Tekshirib ko'ring: @media screen, print and (width >= 60rem) — bu blok 768 piksellik ekranda ishlaydimi?

6. Breakpoint qayerga qo'yiladi?

6.1 Qurilma ro'yxati — tuzoq

Eski darsliklarda "telefon — 576, planshet — 768, kompyuter — 1200" kabi jadvallar bor. Muammo: qurilmalar minglab xil — 360, 390, 412 piksellik telefonlar, yotiq telefon, kichik planshet. Qurilmaga qarab tanlasangiz, oradagi enlar tasodifga qoladi.

6.2 Kontent qayerda "sinadi"

To'g'ri yo'l — kontentga asoslangan breakpoint: sahifani tor holatdan kengaytirib boring. Kontent qayerda noqulay bo'la boshlasa — qatorlar juda uzun, kartalar juda keng, bo'sh joy ko'p — o'sha enga breakpoint qo'yiladi.

«Bahor» taom kartalarini hisoblaymiz. Tajriba shuni ko'rsatdi: karta 18rem (288 piksel) dan torroq bo'lsa, nom va tavsif noqulay o'raladi. Demak:

• Ikki ustun qachon sig'adi: 2 × 288 + 16 (oraliq) + 16 (body chetlari) = 608 piksel ≈ 38rem. Yaxlitlab — 40rem.
• Uch ustun: 3 × 288 + 2 × 16 + 16 = 912 piksel ≈ 57rem. Kattaroq zaxira bilan — 64rem.

Kursdagi ikki breakpoint shunday tanlangan. Sizning loyihangizda kontent boshqa bo'lsa — sonlar ham boshqa bo'ladi.

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  section {
    display: grid;
    gap: 1rem;
  }
  section > h2 {
    margin: 0;
  }
  .taom-karta {
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  .taom-nomi {
    margin: 0;
  }
  .narx {
    color: #b4461a;
  }
  @media (width >= 40rem) {
    section {
      grid-template-columns: 1fr 1fr;
    }
    section > h2 {
      grid-column: 1 / -1;
    }
  }
  @media (width >= 64rem) {
    section {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>
<section>
  <h2>Bugungi menyu</h2>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p>To'y oshi. <span class="narx">35 000 so'm</span></p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p>Qo'lda cho'zilgan. <span class="narx">28 000 so'm</span></p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
    <p>Qovoqli va go'shtli. <span class="narx">30 000 so'm</span></p>
  </article>
</section>

Nimaga qarang: 360 da bitta ustun (karta 344 piksel), 768 da ikkita (har biri 368), 1280 da uchta 410.7-bob. Hech qaysi holatda karta 288 pikseldan tor emas. section > h2 { grid-column: 1 / -1; } sarlavhani butun qatorga cho'zadi (Joylashtirish). Uchinchi karta 768 da ikkinchi qatorda yolg'iz qoladi — media query'siz yechimni Intrinsic layout darsida ko'ramiz.

6.3 Nechta breakpoint?

Kamroq — yaxshiroq: har breakpoint — tekshirish kerak bo'lgan yana bir holat. Ko'p sahifaga ikki-uchta yetadi, qolganini egiluvchan to'r, clamp() va minmax() bajaradi — keyingi uch darsda.

7. Menyu jadvali telefonda kartochka bo'ladi

Accessible va responsive jadvallar darsida keng jadvalni jadval-orami bilan skroll qilgan edik. O'sha yerda "CSS bilan telefonda har qatorni alohida blok qilish mumkin" degan edik. Kichik jadval uchun bu qulay:

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
    color: #1f2a24;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    padding: 0.5rem;
    border-bottom: 1px solid #c9d6cf;
    text-align: start;
  }
  @media (width < 40rem) {
    thead {
      display: none;
    }
    tr,
    td {
      display: block;
    }
    tr {
      margin-bottom: 1rem;
      border: 2px solid #2f6b3a;
      border-radius: 0.5rem;
    }
    td::before {
      content: attr(data-nom) ": ";
      font-weight: bold;
    }
  }
</style>
<table>
  <caption>«Bahor» menyusi</caption>
  <thead>
    <tr><th>Taom</th><th>Tarkibi</th><th>Narxi</th></tr>
  </thead>
  <tbody>
    <tr>
      <td data-nom="Taom">Osh</td>
      <td data-nom="Tarkibi">Guruch, sabzi, qo'y go'shti</td>
      <td data-nom="Narxi">35 000 so'm</td>
    </tr>
    <tr>
      <td data-nom="Taom">Lag'mon</td>
      <td data-nom="Tarkibi">Cho'zma xamir, mol go'shti</td>
      <td data-nom="Narxi">28 000 so'm</td>
    </tr>
  </tbody>
</table>

Nimaga qarang: 768 va 1280 da oddiy jadval. 360 da har qator — yashil ramkali kartochka, har katak alohida qatorda, oldida "Taom:", "Narxi:" kabi nom. Nomlar HTML'dagi data-nom atributidan attr() bilan olinadi (Pseudo-elementlar).

Shart bu yerda < bilan — "tor ekranda": jadval — HTML'ning o'z ko'rinishi, kartochka esa uni buzish. Bunday istisnolarni keyingi darsda muhokama qilamiz.

Diqqat: display ni o'zgartirish ekran o'quvchiga ta'sir qilishi mumkin. Chrome'da accessibility daraxtini tekshirdik: jadval, qator va katak rollari saqlandi, lekin thead yashirilgani uchun ustun sarlavhalari yo'qoldi. Ekran o'quvchi nomni endi ::before dagi "Taom:" dan o'qiydi. Boshqa brauzerlarda natija farq qilishi mumkin — shuning uchun katta jadvalda jadval-orami skrolli ishonchliroq.

8. <link media> — butun faylga shart

Shartni butun CSS fayliga ham qo'yish mumkin:

<link rel="stylesheet" href="assets/css/asosiy.css">
<link rel="stylesheet" href="assets/css/chop.css" media="print">

media atributi @media dagi shartning o'zini oladi. Ikkinchi fayl faqat chop etishda qo'llanadi.

Ko'pchilik "shart bajarilmasa, fayl yuklanmaydi" deb o'ylaydi. Chrome'da kichik lokal serverda tekshirdik: media="print" va media="(width >= 64rem)" li ikkala fayl ham 360 piksellik ekranda yuklandi. Farqi — navbatda: DevTools Network panelidagi Priority ustunida asosiy CSS "Highest", ular esa "Lowest". Eng muhimi — ular sahifa chizilishini to'xtatmaydi (Renderni nima to'xtatadi).

Demak <link media> trafikni tejamaydi, faqat chizishni tezlashtiradi. Kichik saytga bitta asosiy.css ichidagi @media bloklari yetarli.

9. DevTools'da media query'lar

• Styles tabi — qoida tepasida uning sharti ko'rinadi: @media (width >= 40rem). Shart bajarilmasa, qoida ro'yxatda yo'q (DevTools'da CSS).
• Qurilma rejimi → uch nuqta → Show media queries — breakpointlar tepada rangli chiziq bo'lib chiqadi; chiziqni bossangiz, oyna o'sha enga o'tadi.

10. Ko'p uchraydigan xatolar

10.1 Media blok asosiy qoidadan oldin yozilgan

@media (width >= 40rem) {
  div {
    grid-template-columns: 2fr 1fr;
  }
}

div {
  display: grid;
  grid-template-columns: 1fr;
}

Keng ekranda ham bitta ustun. Media query og'irlik qo'shmaydi: ikkala qoidada selektor bir xil (div), shuning uchun pastdagisi yutadi (Kaskad). Chrome'da tekshirdik — xuddi shunday. Tuzatish: media bloklar doim o'zi o'zgartiradigan asosiy qoidadan keyin, odatda fayl yoki bo'lim oxirida.

10.2 Qavs yoki bo'sh joy xatosi

Chrome'da tekshirdik — quyidagilar jim ishlamaydi:

• @media min-width: 40rem — qavs yo'q. Brauzer butun so'rovni "hech qachon" (not all) deb o'qiydi.
• @media screen and(min-width: 40rem) — and dan keyin bo'sh joy yo'q, and( funksiya deb o'qiladi. Natija — yana not all.
• (width => 40rem) — operator teskari: => emas, >=.
• (min-width: 40) — birlik yo'q.

Tuzatish: shart doim qavsda, and ikki tomonida bo'sh joy, birlik majburiy.

10.3 var() shartda

@media (width >= var(--kenglik)) ishlamaydi (CSS o'zgaruvchilari 1): o'zgaruvchi elementga tegishli, media query esa oynaga. Sonlarni qo'lda yozasiz. @custom-media degan taklif bor, lekin Baseline ma'lumotiga ko'ra u hali hech bir asosiy brauzerda yo'q (Baseline emas).

11. Mashqlar

1-mashq (oson): Range syntax'ga o'giring

• @media (min-width: 64rem) → @media (width 64rem)
• @media (max-width: 39.99rem) → @media (width 40rem)
• @media (min-width: 40rem) and (max-width: 63.99rem) → @media (40rem <= width 64rem)

2-mashq (o'rta): Qaysi rang?

p {
  color: #1f2a24;
}
@media (width >= 40rem) {
  p {
    color: #2f6b3a;
  }
}
@media (width >= 64rem) {
  p {
    color: #b4461a;
  }
}

360, 640, 768, 1024 va 1280 piksellik oynalarda paragraf qaysi rangda bo'ladi? Keyin ikki media blokning o'rnini almashtiring — nima o'zgaradi?

Ishora: 1024 da ikkala shart ham bajariladi. Ikkalasi bajarilsa — kaskad qoidasi.

3-mashq (qiyin): Bron formasi ikki ustunda

«Bahor»ning bron formasida (Qulay va accessible forma) "Siz haqingizda" guruhi — fieldset ichida legend va ikkita div: ism va telefon. Talab:

1. Tor ekranda maydonlar ustma-ust, har biri butun en.
2. 40rem dan boshlab ism va telefon yonma-yon, teng ustunlarda.
3. Shart range syntax'da, rem da.

Ishora: fieldset ga grid bering. legend grid katagiga tushmaydi — brauzer uni ramka ustiga alohida chizadi. Maydon eni — width: 100% va box-sizing (box-sizing).

<style>
  body {
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  fieldset {
    display: grid;
    gap: 1rem;
  }
  label,
  input {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  input {
    padding: 0.5rem;
    font: inherit;
  }
  @media (width >= 40rem) {
    fieldset {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>
<form action="https://example.com/bron" method="post">
  <fieldset>
    <legend>Siz haqingizda</legend>
    <div>
      <label for="ism">Ismingiz</label>
      <input id="ism" name="ism" type="text" autocomplete="name">
    </div>
    <div>
      <label for="telefon">Telefon raqamingiz</label>
      <input id="telefon" name="telefon" type="tel"
        autocomplete="tel">
    </div>
  </fieldset>
</form>

4-mashq: Portfolio qadami — birinchi breakpoint

O'tgan darsdagi audit natijalaringiz asosida portfoliongizga birinchi media query qo'shamiz. Flex naqshlari darsida header navbar bo'lgan edi: ism chapda, menyu o'ngda, joy yetmasa menyu o'raladi. Qaysi enda o'ralishini esa matn uzunligi hal qiladi. Bu darsda boshqa yo'lni sinaymiz: chegarani media query bilan o'zimiz aniq qo'yamiz.

1. Tor ekranda header dagi ism va menyu ustma-ust tursin.
2. 40rem dan boshlab — bir qatorda: ism chapda, menyu o'ngda, vertikal markazda.
3. DevTools qurilma rejimida "Show media queries" ni yoqing va chiziqni bosib tekshiring: 639 da ustma-ust, 640 da bir qatorda.

Ishora: Flex naqshlari darsidagi header qoidasining flex qatorlarini (display dan column-gap gacha) media blok ichiga ko'chiring — asosda ular qolmasin.

/* Header: telefonda ustma-ust, 40rem dan bir qatorda */
@media (width >= 40rem) {
  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
  }
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  header {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  header a {
    color: #1f6f4a;
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0;
    list-style: none;
  }
  @media (width >= 40rem) {
    header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      column-gap: 1rem;
    }
  }
</style>
<header>
  <p><a href="./">Aziz Karimov</a></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./" aria-current="page">Bosh sahifa</a></li>
      <li><a href="haqimda/">Men haqimda</a></li>
      <li><a href="loyihalar/">Loyihalar</a></li>
      <li><a href="aloqa/">Aloqa</a></li>
    </ul>
  </nav>
</header>

12. Real ishda

• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) dagi md:flex — ichkarida @media (width >= 48rem), ya'ni rem va range syntax.
• Dizayn tizimlarida breakpointlar bir joyda yoziladi va hamma komponent shularni ishlatadi. @custom-media brauzerlarga kelmaguncha, buni Sass kabi vositalar qiladi.
• Intervyuda so'raladi: "min-width va max-width farqi?", "Breakpointni qanday tanlaysiz?", "Nega em/rem breakpoint?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• @media (shart) { ... } — shart bajarilganda ichidagi qoidalar kaskadga qo'shiladi; og'irlik qo'shmaydi, shuning uchun media blok asosiy qoidadan keyin yoziladi.
• Range syntax (width >= 40rem, 40rem <= width < 64rem) — aniq va teshiksiz; 2023-yildan beri hamma brauzerda.
• Media query'dagi rem brauzerning boshlang'ich shriftidan olinadi — Large shriftli foydalanuvchida breakpoint ham suriladi. Zoom'da px va rem bir xil.
• and — va, vergul — yoki, not — teskari; only endi kerak emas.
• Breakpoint kontentga qarab: kurs uchun 40rem va 64rem.
• <link media> fayli baribir yuklanadi, lekin chizishni to'xtatmaydi.

Keyingi dars: Mobile-first yondashuv — nega avval telefon uchun yozish kodni qisqa qiladi va portfoliongizni to'liq shunday qayta quramiz.

Manbalar

• MDN: "Using media queries", "@media", "Media query range syntax", "Beginner's guide to media queries" — developer.mozilla.org
• W3C: "Media Queries Level 4" — w3.org/TR/mediaqueries-4
• web-features (Baseline ma'lumotlari): "Media query range syntax" — github.com/web-platform-dx/web-features
• web.dev: "Learn CSS — Media queries" — web.dev/learn/css/media-queries