MediaQueryList API
MediaQueryList obyekti
MediaQueryList obyekti media so‘rovdan olingan ma’lumotlarni saqlaydi.
MediaQueryList obyekti — window obyektining xususiyati.
MediaQueryList obyektiga quyidagicha murojaat qilinadi:
window.matchMedia() yoki shunchaki matchMedia():
Misollar
const mqlObj = window.matchMedia();
O‘zingiz sinab ko‘ring »
const mqlObj = matchMedia();
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
MediaQueryList xususiyatlari
| Xususiyat | Tavsif |
|---|---|
| matches | Boolean. Hujjat so‘rovga mos kelsa true, aks holda false. |
| media | String. Media so‘rov (ro‘yxati). |
MediaQueryList metodlari
| Metod | Tavsif |
|---|---|
| addListener() | Media so‘rovning hisoblangan natijasi har safar o‘zgarganda bajariladigan yangi tinglovchi funksiyani qo‘shadi |
| removeListener() | Avval qo‘shilgan tinglovchi funksiyani media so‘rovlar ro‘yxatidan olib tashlaydi. Agar ko‘rsatilgan tinglovchi ro‘yxatda bo‘lmasa, hech narsa qilmaydi |
Media so‘rovlar
matchMedia() metodining media so‘rovlari CSS @media qoidasining istalgan media xususiyati bo‘lishi mumkin: min-height, min-width, orientation va h.k.
Misollar
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Media turlari
Media turi qurilmaning umumiy toifasini tavsiflaydi.
| Qiymat | Tavsif |
|---|---|
| all | Standart. Barcha media turidagi qurilmalar uchun ishlatiladi |
| Printerlar uchun ishlatiladi | |
| screen | Kompyuter ekranlari, planshetlar, smartfonlar va h.k. uchun ishlatiladi |
Media xususiyatlari
Media xususiyatlari ekran o‘lchami, yo‘nalishi va aniqligi kabi qurilma imkoniyatlariga qarab uslublarni qo‘llash uchun ishlatiladi.
Media xususiyatlari ixtiyoriy bo‘lib, har bir media xususiyati ifodasi qavslar ichiga olinishi shart.
| Qiymat | Tavsif |
|---|---|
| any-hover | Mavjud kiritish vositalaridan birortasi foydalanuvchiga elementlar ustiga kursorni olib borish (hover) imkonini beradimi? |
| any-pointer | Mavjud kiritish vositalaridan birortasi ko‘rsatuvchi qurilma (pointing device) hisoblanadimi va agar shunday bo‘lsa, u qanchalik aniq? |
| aspect-ratio | Viewport kengligi va balandligi orasidagi nisbat |
| color | Chiqarish qurilmasidagi har bir rang komponenti uchun bitlar soni |
| color-gamut | Foydalanuvchi agenti (brauzer) va chiqarish qurilmasi qo‘llab-quvvatlaydigan ranglarning taxminiy diapazoni |
| color-index | Qurilma ko‘rsata oladigan ranglar soni |
| device-posture | Qurilmaning joriy holatini, ya’ni viewport tekis yoki buklangan holatda ekanligini aniqlaydi |
| display-mode | Ilova ko‘rsatilayotgan rejim: masalan, to‘liq ekran yoki picture-in-picture (rasm ichida rasm) rejimi |
| dynamic-range | Foydalanuvchi agenti (brauzer) va chiqarish qurilmasi qo‘llab-quvvatlaydigan yorqinlik, kontrast nisbati va rang chuqurligi kombinatsiyasi |
| forced-colors | Foydalanuvchi agenti (brauzer) rang palitrasini cheklashini aniqlaydi |
| grid | Qurilma grid yoki bitmap turidami |
| height | Viewport balandligi |
| hover | Asosiy kiritish vositasi foydalanuvchiga elementlar ustiga kursorni olib borish (hover) imkonini beradimi? |
| inverted-colors | Brauzer yoki uning ostidagi operatsion tizim ranglarni teskarisiga o‘zgartiryaptimi (invert)? |
| monochrome | Monoxrom (kulrang tusli) qurilmada har bir "rang" uchun bitlar soni |
| orientation | Viewport yo‘nalishi (landshaft yoki portret rejimi) |
| overflow-block | Chiqarish qurilmasi blok o‘qi bo‘ylab viewport’dan toshib chiqadigan kontentni qanday qayta ishlaydi |
| overflow-inline | Inline o‘q bo‘ylab viewport’dan toshib chiqadigan kontentni aylantirish (scroll) mumkinmi |
| pointer | Asosiy kiritish vositasi ko‘rsatuvchi qurilma (pointing device) hisoblanadimi va agar shunday bo‘lsa, u qanchalik aniq? |
| prefers-color-scheme | Foydalanuvchi yorug‘ rang sxemasini afzal ko‘radimi yoki qorong‘i rang sxemasini? |
| prefers-contrast | Foydalanuvchi yuqori kontrastli displeyni afzal ko‘radimi? |
| prefers-reduced-data | Foydalanuvchi kamroq ma’lumot sarflashni afzal ko‘radimi? |
| prefers-reduced-motion | Foydalanuvchi harakatning (animatsiyalarning) kamaytirilishini afzal ko‘radimi? |
| prefers-reduced-transparency | Foydalanuvchi shaffoflikning kamaytirilishini afzal ko‘radimi? |
| resolution | Chiqarish qurilmasining dpi yoki dpcm’dagi aniqligi (resolution) |
| scan | Chiqarish qurilmasining skanerlash jarayoni |
| scripting | Skriptlar (masalan, JavaScript) mavjudmi? |
| shape | Viewport doira shaklidami yoki to‘rtburchak shaklidami? |
| update | Chiqarish qurilmasi kontent ko‘rinishini qanchalik tez o‘zgartira oladi |
| video-dynamic-range | Foydalanuvchi agentining (brauzerning) video tekisligi va chiqarish qurilmasi qo‘llab-quvvatlaydigan yorqinlik, kontrast nisbati va rang chuqurligi kombinatsiyasi |
| width | Viewport kengligi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!