CSS media so‘rovlar
CSS media so‘rovlari
CSS media so‘rovlar qurilma xususiyatlari yoki veb-sahifani ko‘rsatayotgan muhitga qarab uslublarni qo‘llash imkonini beradi.
CSS media so‘rovlar moslashuvchan veb-sahifalar yaratish uchun juda muhim.
CSS @media qoidasi stillar jadvalingizga media so‘rovlar qo‘shish uchun ishlatiladi.
Media so‘rov sintaksisi
Media so‘rov ixtiyoriy media-tur va bir yoki bir nechta media-imkoniyatlardan iborat bo‘lib, ular true yoki false qiymatini qaytaradi.
@media [not] media-type and (media-feature: value)
and (media-feature: value) {
/* CSS rules to apply
*/
}
media-tur ixtiyoriy. Biroq not ishlatsangiz, media-turni ham ko‘rsatishingiz kerak.
Media so‘rov natijasi ko‘rsatilgan media-tur qurilma turiga mos bo‘lsa va barcha media-imkoniyatlar true bo‘lsa, true bo‘ladi. Media so‘rov true bo‘lsa, normal kaskad qoidalariga muvofiq mos uslub qoidalari qo‘llanadi.
not va and kalit so‘zlarining ma’nosi:
not: bu ixtiyoriy kalit so‘z butun media so‘rovning ma’nosini teskari qiladi.
and: bu kalit so‘z media-tur va bir yoki bir nechta media-imkoniyatni birlashtiradi.
CSS media turlari
Ixtiyoriy media turi uslublar qaysi media uchun ekanini belgilaydi. Agar media turi ko‘rsatilmasa, "all" qilib belgilanadi.
| Qiymat | Tavsif |
|---|---|
| all | Barcha turdagi media qurilmalari uchun ishlatiladi |
| Chop etishni oldindan ko‘rish rejimi uchun ishlatiladi | |
| screen | Kompyuter ekranlari, planshetlar va smartfonlar uchun ishlatiladi |
CSS media xususiyatlari
Media imkoniyati qurilmaning aniq bir xususiyatini belgilaydi.
Mana keng qo‘llaniladigan ba’zi media xususiyatlari:
| Qiymat | Tavsif |
|---|---|
| max-height | Viewport’ning maksimal balandligi |
| min-height | Viewport’ning minimal balandligi |
| height | Viewport balandligi (aylantirish paneli bilan birga) |
| max-width | Viewport’ning maksimal kengligi |
| min-width | Viewport’ning minimal kengligi |
| width | Viewport kengligi (aylantirish paneli bilan birga) |
| orientation | Viewport yo‘nalishi (landshaft yoki portret) |
| resolution | Screen resolution |
| prefers-color-scheme | User’s preferred color scheme (light or dark) |
Media so‘rovlar misollari
Bu yerda ko‘rish oynasi kengligi 480px yoki undan katta bo‘lsa, body fon rangini lightgreen qilish uchun media so‘rovdan foydalanamiz:
Misol
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
O‘zingiz sinab ko‘ring »
Bu yerda ko‘rish oynasi kengligi 480px va 768px orasida bo‘lsa, body fon rangini lightgreen qilish uchun media so‘rovdan foydalanamiz:
Misol
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
O‘zingiz sinab ko‘ring »
Ko‘proq media so‘rov misollari
Media so‘rovlar bo‘yicha ko‘proq misollar uchun keyingi sahifaga o‘ting: CSS MQ Examples.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!