Media Queries — min-width, max-width, orientation

~20 daq · CSS · Pozitsiya va Responsive

Muammodan boshlaylik

22-darsdagi auto-fill ko'p narsani media query siz hal qildi. Lekin ba'zi o'zgarishlarni "o'zi moslashadigan" layout qila olmaydi:

• Telefonda menyu yashiriladi va "☰" tugmasi chiqadi, kompyuterda — to'liq menyu
• Telefonda sidebar asosiy kontentdan keyin, kompyuterda — yonida
• Katta ekranda sarlavha kattaroq, bo'shliqlar kengroq

"Ekran shunday bo'lsa — mana bu stillarni qo'lla" degan shartlar uchun — media query lar.

Sintaksis

@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

Qavs ichidagi shart rost bo'lsa — ichidagi qoidalar qo'llanadi. Aks holda — e'tiborsiz.

Media query o'zi specificity qo'shmaydi (5-dars). Ichidagi qoidalar oddiy qoidalar kabi kaskadda qatnashadi — shuning uchun media query lar odatda asosiy qoidadan keyin yoziladi, aks holda asosiy qoida ularni yengib qo'yadi.

min-width va max-width

@media (min-width: 768px) { ... }    /* 768px va undan KENG ekranlarda */
@media (max-width: 767px) { ... }    /* 767px va undan TOR ekranlarda */

25-darsdan: Mobile First — min-width bilan:

/* Asosiy — telefon */
.layout {
  display: grid;
  gap: 16px;
}

/* Planshetdan boshlab */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
  }
}

/* Katta ekranlardan boshlab */
@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 240px 1fr 300px;
    gap: 32px;
  }
}

min-width lar o'sish tartibida yoziladi: har bir keyingi blok oldingisini kengroq ekranlar uchun to'ldiradi.

Zamonaviy range sintaksisi

@media (width >= 768px) { ... }
@media (width < 768px) { ... }
@media (768px <= width < 1200px) { ... }    /* faqat planshet */

O'qish osonroq va "767 yoki 768?" chalkashligi yo'q. Barcha zamonaviy brauzerlarda ishlaydi.

Breakpoint larni qanday tanlash

Breakpoint — layout o'zgaradigan kenglik. Ko'p ishlatiladiganlar:

(Tailwind ning standart qiymatlari.)

[!TIP] Breakpoint ni qurilma bo'yicha emas, kontent bo'yicha tanlang. Brauzer oynasini sekin torayting: dizayn qayerda buzila boshlasa (qatorlar juda uzun, kartochkalar juda tor, menyu sig'maydi) — breakpoint o'sha yerda. "iPhone 15 kengligi" degan narsaga bog'lanmang: ertaga boshqa o'lchamli telefon chiqadi.

Breakpoint lar loyiha bo'ylab bir xil bo'lsin. Ularni bitta joyda kelishib oling (Sass o'zgaruvchilari yoki loyiha hujjatida) — CSS o'zgaruvchilari media query sharti ichida ishlamaydi.

Shartlarni birlashtirish

/* VA */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* YOKI — vergul */
@media (max-width: 600px), (orientation: portrait) { ... }

/* EMAS */
@media not print { ... }

Boshqa media xususiyatlari

orientation — ekran holati

@media (orientation: landscape) and (max-height: 500px) {
  /* telefon yon tomonga burilgan — balandlik kam */
  .hero { min-height: auto; }
  .header { position: static; }    /* sticky header kichik ekranni egallamasin */
}

portrait — vertikal (balandlik ≥ kenglik), landscape — gorizontal.

Kirish qurilmasi

@media (hover: hover) and (pointer: fine) {
  /* sichqoncha — aniq ko'rsatkich, hover bor */
  .card:hover { box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
}

@media (pointer: coarse) {
  /* barmoq — kattaroq bosish maydonlari */
  .btn { min-height: 48px; }
}

Ekran o'lchami qurilma turini aytmaydi: sensorli noutbuklar va sichqonchali planshetlar bor. Qanday boshqarilishini to'g'ridan-to'g'ri so'rang.

Foydalanuvchi sozlamalari

/* Qorong'i rejim — tizim sozlamasi (6-dars) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f19;
    --matn: #f1f5f9;
  }
}

/* Harakat kamaytirilgan — bosh aylanishi, epilepsiya xavfi bor foydalanuvchilar */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

prefers-reduced-motion — 28–30-darslardagi animatsiyalar uchun majburiy hurmat: tizimda "harakatni kamaytirish" yoqilgan bo'lsa, sayt animatsiyasiz ishlasin. Bu yerda !important oqlangan (5-dars) — foydalanuvchi sozlamasi har qanday komponent stilidan ustun bo'lishi kerak.

Chop etish

@media print {
  .header, .sidebar, .donat-btn { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; }   /* qog'ozda havola manzili ko'rinsin */
}

Container queries — konteyner o'lchami bo'yicha

22-darsdagi muammo: media query ekranga qaraydi, lekin komponent sidebar ichida tor, asosiy qismda keng bo'lishi mumkin. Container query — komponent o'z konteyneri o'lchamiga qaraydi:

.card-wrap {
  container-type: inline-size;     /* "meni o'lchang" */
}

.card {
  display: grid;
  gap: 12px;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 120px 1fr;   /* konteyner keng bo'lsa — rasm yonida */
  }
}

Bir xil kartochka — sidebar da ustma-ust, asosiy qismda yonma-yon, sahifadagi qayerda bo'lishiga qarab. Komponentlar haqiqatan qayta ishlatiladigan bo'ladi. 2023 yildan barcha zamonaviy brauzerlarda ishlaydi.

Media query larni qayerda yozish

Ikki yondashuv:

/* 1. Komponent yonida — tavsiya etiladi */
.nav { ... }
@media (min-width: 768px) { .nav { ... } }

.card { ... }
@media (min-width: 768px) { .card { ... } }

/* 2. Fayl oxirida, bitta blokda */
.nav { ... }
.card { ... }

@media (min-width: 768px) {
  .nav { ... }
  .card { ... }
}

Birinchisi — komponentning barcha stillari bir joyda, o'zgartirish va o'chirish oson. Bir xil media query ning ko'p marta takrorlanishi tezlikka ta'sir qilmaydi.

Nima uchun shunday?

Nima uchun container query lar paydo bo'lishiga 10 yildan ortiq vaqt ketdi — media query lar 2012 yildan beri bor-ku?

Chunki texnik jihatdan bu ancha qiyin masala: aylanma bog'liqlik xavfi. Konteynerning o'lchami ko'pincha ichidagi kontentga bog'liq — va agar kontent konteyner o'lchamiga qarab o'zgarsa, o'z navbatida konteyner o'lchamini o'zgartirishi mumkin: cheksiz tsikl. Ekran o'lchami esa kontentga bog'liq emas — shuning uchun media query lar oddiy edi. Yechim — container-type: inline-size: siz "bu konteynerning kengligi ichidagi kontentga bog'liq emas" deb va'da berasiz (u ota tomonidan belgilanadi), va brauzer uni xavfsiz o'lchay oladi. Bu bitta qator qo'shimcha kod — o'n yillik muammoning yechimi.

Xulosa

Eslab qoling:

• @media (shart) { ... } — shart rost bo'lsa qo'llanadi; specificity qo'shmaydi — asosiy qoidadan keyin yozing
• Mobile First: min-width, o'sish tartibida; range sintaksis: (width >= 768px)
• Breakpoint — kontent buzilgan joyda, qurilma bo'yicha emas; loyiha bo'ylab bir xil
• and, , (yoki), not
• orientation, hover/pointer — qurilma qanday boshqarilishi
• prefers-color-scheme, prefers-reduced-motion — foydalanuvchi sozlamalarini hurmat qiling
• @media print — chop etish uchun
• Container query — komponent konteyneri o'lchamiga qaraydi: container-type: inline-size + @container

Keyingi dars

27-dars: Responsive Typography — clamp(), fluid typography