CSS Media Queries

CSS Media Queries – bu turli ekran o‘lchamlari, qurilmalar yoki sharoitlarga qarab turli xil style qo‘llash imkonini beruvchi qudratli vosita. U responsive (moslashuvchan) dizayn yaratishda asosiy texnikalardan biridir.

Asosiy sintaksis

@media (shart) {
  /* style kodlari */
}

Oddiy misol

/* Standart style */
body {
  background-color: white;
}
 
/* 768px dan kichik ekranlar uchun */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Natija:

Desktopda oq fon.
Mobil qurilmalarda havo rang fon.

Mashhur media query turlari

1. max-width va min-width

@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}
 
@media (min-width: 1200px) {
  p {
    font-size: 20px;
  }
}

2. orientation (portret yoki landshaft)

@media (orientation: portrait) {
  body {
    background-color: pink;
  }
}
 
@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

3. prefers-color-scheme (dark/light mode)

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

4. prefers-reduced-motion (animatsiya sezgirligi)

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Complex (bir nechta shart birgalikda)

@media (min-width: 600px) and (max-width: 900px) {
  .container {
    padding: 20px;
  }
}

Izoh: faqat 600px–900px oralig‘ida amal qiladi.

Mobile-first yondashuv

Ko‘pincha mobile-first yondashuv ishlatiladi: avval kichik ekranlar uchun style yoziladi, keyin esa kattaroq ekranlar uchun min-width qo‘llanadi.

/* Mobil uchun */
.card {
  font-size: 14px;
}
 
/* Tablet va kattaroq ekranlar */
@media (min-width: 768px) {
  .card {
    font-size: 16px;
  }
}
 
/* Desktop */
@media (min-width: 1200px) {
  .card {
    font-size: 18px;
  }
}

Afzalliklari

Responsive dizayn yaratish imkonini beradi.
Turli qurilmalar (mobil, tablet, desktop) uchun foydalanuvchi tajribasini yaxshilaydi.
Accessibility va foydalanuvchi sozlamalarini (dark mode, reduced motion) hisobga olish mumkin.

Xulosa

Media Queries – bu turli ekran sharoitlariga moslashadigan web-ilova yaratishda eng asosiy qurol. To‘g‘ri strategiya (mobile-first yoki desktop-first) tanlash orqali loyihangizni universallashtirishingiz mumkin.

Media Queries

On this page