Not, only va va kalit so‘zlarining ma’nosi : not

@media media so'rovlarida turli xil media turlari/qurilmalar uchun urli uslublarni qo'llash uchun ishlatiladi.
Media so'rovlari ko'p narsalarni tekshirish uchun ishlatilishi mumkin, masalan:

• 
  ko'rish oynasining kengligi va balandligi
  
• 
  qurilmaning kengligi va balandligi
  
• 
  orientatsiya (planshet/telefon landshaft yoki portret rejimidami?)
  
• 
  rezolyutsiya
  

Media so'rovlaridan foydalanish ish stoli kompyuterlari, noutbuklar, planshetlar va mobil telefonlarga moslashtirilgan uslublar jadvalini (responsive veb-dizayn) yetkazib berishning mashhur usuli hisoblanadi.
Muayyan uslublar faqat bosma hujjatlar yoki ekranni oʻqish uchun moʻljallanganligini belgilash uchun media soʻrovlaridan ham foydalanishingiz mumkin (media turi: chop etish, ekran yoki nutq).
Media turlaridan tashqari, media xususiyatlari ham mavjud. Media xususiyatlari foydalanuvchi agenti yoki displey qurilmasining o'ziga xos xususiyatini sinab ko'rish imkonini berib, media so'rovlariga aniqroq ma'lumotlarni taqdim etadi. Masalan, siz uslublarni faqat ma'lum bir kenglikdan kattaroq yoki kichikroq ekranlarga qo'llashingiz mumkin.

CSS @media sintaksisi

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
not , only va va kalit so‘zlarining ma’nosi :
not: not kalit so'zi butun media so'rovining ma'nosini o'zgartiradi.
faqat: Yagona kalit so'z media xususiyatlariga ega bo'lgan media so'rovlarini qo'llab-quvvatlamaydigan eski brauzerlarning belgilangan uslublarni qo'llashiga to'sqinlik qiladi. Bu zamonaviy brauzerlarga ta'sir qilmaydi.
va: va kalit so'zi media xususiyatini media turi yoki boshqa media xususiyatlari bilan birlashtiradi.
Ularning barchasi ixtiyoriy. Biroq, agar siz not yoki only dan foydalansangiz , media turini ham ko'rsatishingiz kerak
Shuningdek, siz turli xil media uchun turli uslublar jadvallariga ega bo'lishingiz mumkin , masalan:

Brauzer kengligi 600px yoki undan kam bo'lsa, elementni yashirish:

@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

Ko'rish oynasi kengligi 800 piksel yoki kengroq bo'lsa, fon rangini lavanda rangga, agar ko'rish oynasi kengligi 400 va 799 pikselgacha bo'lsa, och yashil rangga o'rnatish uchun media so'rovlardan foydalaning. Agar ko'rish oynasi 400 pikseldan kichik bo'lsa, fon rangi ochiq ko'k bo'ladi:

body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}

---

JavaScript Media Queries

Current design: unknown

element one

element two

element three