Veb-ishlab chiqishda media so'rovlar qanday ishlaydi…

Media so'rovlar qurilma yoki ko'rish maydonining xususiyatlariga qarab ma'lum CSS uslublarini qo'llash imkonini beradi. Ular turli ekranlarda, jumladan, mobil qurilmalar, planshetlar va ish stolida to'g'ri ko'rsatiladigan moslashuvchan dizayn yaratish uchun ishlatiladi.

Asosiy media so'rovining sintaksisi:

@media <media_turi> and (<ifoda>) {
  /* CSS qoidalari */
}

<media_turi> so'rov qaysi qurilma turiga qo'llanilishini belgilaydi (masalan, screen, print, all).
<ifoda> uslublar qachon qo'llanilishini shartlaydi (masalan, kengligi, balandligi, ekran orientatsiyasi, rezolyutsiya).

Moslashuvchan dizayn uchun mashhur ifodalar:

min-width: Ko'rsatish maydonining kengligi belgilangan qiymatdan katta yoki teng bo'lsa, uslublar qo'llaniladi.
max-width: Ko'rsatish maydonining kengligi belgilangan qiymatdan kichik yoki teng bo'lsa, uslublar qo'llaniladi.
orientation: Ekran orientatsiyasiga qarab uslublar qo'llaniladi (portrait yoki landscape).
resolution: Ekran rezolyutsiyasiga qarab uslublar qo'llaniladi.

Mobil qurilmalarda max-width dan foydalanish misoli:

/* Asosiy uslublar */
body {
  font-size: 16px;
}

/* 768px kenglikgacha bo'lgan ekranlar uchun uslublar (odatda mobil uchun) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

min-width dan foydalanib, ish stolida ("mobil birinchi" yondashuvi) uchun misol:

/* Mobil uchun asosiy uslublar */
.column {
  width: 100%;
}

/* 992px va undan keng ekranlar uchun uslublar (odatda ish stoli uchun) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

and, or (media so'rovlarida, or vergul bilan yoziladi) va not operatorlari bilan ifodalarni kombinatsiya qilish:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Faqat planshetlar uchun uslublar */
}

@media screen and (orientation: landscape), print {
  /* Gorizontal orientatsiya va chop etish uchun uslublar */
}

viewport meta-tegi mobil qurilmalarda media so'rovlarining to'g'ri ishlashiga muhim:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ko'rish maydonining kengligini qurilmaning kengligiga tenglaydi.
initial-scale=1.0 boshlang'ich zoom darajasini belgilaydi.

Ushbu meta-teg olmadan, ko'plab mobil brauzerlar sahifani standart tarzda kattalashtiradi, haqiqiy qurilma kengligini e'tiborsiz qoldiradi, bu esa moslashuvchanlikni buzadi.

Veb-ishlab chiqishda media so'rovlar qanday ishlaydi, jumladan mobil qurilmalar uchun moslashuvchan dizayn uchun?