@media
Misol
Brauzer oynasi kengligi 600px yoki undan kam bo‘lganda <body> elementining fon rangini "lightblue" ga o‘zgartiring:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @media qoidasi media so‘rovlarda turli media turlari/qurilmalar uchun turli uslublarni qo‘llash uchun ishlatiladi.
Media so‘rovlar yordamida ko‘p narsalarni tekshirish mumkin, masalan:
- viewport kengligi va balandligi
- qurilma kengligi va balandligi
- orientatsiya (planshet/telefon albom (landscape) yoki portret (portrait) rejimidami?)
- ekran aniqligi (resolution)
Media so‘rovlardan foydalanish statsionar kompyuterlar, noutbuklar, planshetlar va mobil telefonlarga moslashtirilgan uslublar jadvalini (moslashuvchan veb-dizayn) yetkazib berishning ommabop usulidir.
Shuningdek, media so‘rovlar yordamida muayyan uslublar faqat chop etiladigan hujjatlar yoki ekran o‘quvchi dasturlar uchun ekanini belgilashingiz mumkin (mediatype: print, screen yoki speech).
Media turlaridan tashqari media imkoniyatlari (media features) ham mavjud. Media imkoniyatlari foydalanuvchi agenti yoki displey qurilmasining muayyan imkoniyatini tekshirishga imkon berib, media so‘rovlarga aniqroq tafsilotlar qo‘shadi. Masalan, uslublarni faqat ma’lum kenglikdan katta yoki kichik ekranlarga qo‘llashingiz mumkin.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS sintaksisi
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
not, only va and kalit so‘zlarining ma’nosi:
not: not kalit so‘zi butun media so‘rovning ma’nosini teskarisiga o‘zgartiradi.
only: only kalit so‘zi media imkoniyatlari bilan yozilgan media so‘rovlarni qo‘llab-quvvatlamaydigan eski brauzerlarning ko‘rsatilgan uslublarni qo‘llashiga yo‘l qo‘ymaydi. Zamonaviy brauzerlarga u ta’sir qilmaydi.
and: and kalit so‘zi media imkoniyatini media turi yoki boshqa media imkoniyatlari bilan birlashtiradi.
Ularning barchasi ixtiyoriy. Biroq not yoki only ishlatsangiz, media turini ham ko‘rsatishingiz shart.
Shuningdek, turli medialar uchun turli uslublar jadvallari ham bo‘lishi mumkin, masalan:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....
Media turlari
Media turi (media-type) 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 imkoniyatlari
Media imkoniyatlari qurilmaning ekran o‘lchami, orientatsiyasi va aniqligi kabi imkoniyatlariga qarab uslublarni qo‘llash uchun ishlatiladi.
Media imkoniyatlari ixtiyoriy bo‘lib, har bir media imkoniyati ifodasi qavslar ichiga olinishi shart.
| Qiymat | Tavsif |
|---|---|
| any-hover | Mavjud kiritish mexanizmlaridan birortasi foydalanuvchiga elementlar ustiga kursorni olib borish (hover) imkonini beradimi? |
| any-pointer | Mavjud kiritish mexanizmlaridan 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 qurilmasida har bir rang komponentiga to‘g‘ri keladigan bitlar soni |
| color-gamut | Foydalanuvchi agenti va chiqarish qurilmasi qo‘llab-quvvatlaydigan ranglarning taxminiy diapazoni |
| color-index | Qurilma ko‘rsata oladigan ranglar soni |
| device-posture | Qurilmaning joriy holatini (posture), ya’ni viewport tekis yoki buklangan holatda ekanini aniqlaydi |
| display-mode | Ilova ko‘rsatilayotgan rejim: masalan, to‘liq ekran yoki picture-in-picture rejimi |
| dynamic-range | Foydalanuvchi agenti va chiqarish qurilmasi qo‘llab-quvvatlaydigan yorqinlik, kontrast nisbati va rang chuqurligi kombinatsiyasi |
| forced-colors | Foydalanuvchi agenti rang palitrasini cheklashini aniqlaydi |
| grid | Qurilma setkali (grid) yoki bitmap ekanligi |
| height | Viewport balandligi |
| hover | Asosiy kiritish mexanizmi foydalanuvchiga elementlar ustiga kursorni olib borish (hover) imkonini beradimi? |
| inverted-colors | Brauzer yoki uning ostidagi operatsion tizim ranglarni teskari aylantiryaptimi? |
| monochrome | Monoxrom (kulrang tusli) qurilmada har bir "rang" uchun bitlar soni |
| orientation | Viewport orientatsiyasi (albom (landscape) yoki portret (portrait) rejimi) |
| overflow-block | Chiqarish qurilmasi blok o‘qi bo‘ylab viewportdan toshib chiqqan kontentni qanday qayta ishlaydi |
| overflow-inline | Inline o‘qi bo‘ylab viewportdan toshib chiqqan kontentni aylantirish (scroll) mumkinmi |
| pointer | Asosiy kiritish mexanizmi ko‘rsatuvchi qurilma (pointing device) hisoblanadimi va agar shunday bo‘lsa, u qanchalik aniq? |
| prefers-color-scheme | Foydalanuvchi och rangli sxemani afzal ko‘radimi yoki to‘q rangli sxemanimi? |
| prefers-contrast | Foydalanuvchi yuqori kontrastli displeyni afzal ko‘radimi? |
| prefers-reduced-data | Foydalanuvchi ma’lumotlardan kamroq foydalanishni afzal ko‘radimi? |
| prefers-reduced-motion | Foydalanuvchi harakatning kamaytirilishini afzal ko‘radimi? |
| prefers-reduced-transparency | Foydalanuvchi shaffoflikning kamaytirilishini afzal ko‘radimi? |
| ekran aniqligi (resolution) | Chiqarish qurilmasining dpi yoki dpcm bilan ifodalangan 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 video tekisligi va chiqarish qurilmasi qo‘llab-quvvatlaydigan yorqinlik, kontrast nisbati va rang chuqurligi kombinatsiyasi |
| width | Viewport kengligi |
Ko‘proq misollar
Misol
Brauzer kengligi 600px yoki undan kam bo‘lganda elementni yashiring:
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
O‘zingiz sinab ko‘ring »
Misol
Media so‘rovlar yordamida viewport kengligi 800 piksel yoki undan katta bo‘lsa, background-color xususiyatini lavender, 400 dan 799 pikselgacha bo‘lsa, lightgreen qilib o‘rnating. Agar viewport 400 pikseldan kichik bo‘lsa, background-color lightblue 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;
}
}
O‘zingiz sinab ko‘ring »
Misol
Moslashuvchan navigatsiya menyusini yarating (katta ekranlarda gorizontal, kichik ekranlarda vertikal ko‘rsatiladi):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
O‘zingiz sinab ko‘ring »
Misol
Media so‘rovlar yordamida moslashuvchan ustunli maket yarating:
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
O‘zingiz sinab ko‘ring »
Misol
Media so‘rovlardan brauzer orientatsiyasiga qarab sahifa maketini o‘zgartirish uchun ham foydalanish mumkin. Faqat brauzer oynasining kengligi balandligidan katta bo‘lganda — ya’ni "Landscape" (albom) deb ataladigan orientatsiyada — qo‘llaniladigan CSS xususiyatlari to‘plamiga ega bo‘lishingiz mumkin.
Orientatsiya albom (landscape) rejimida bo‘lsa, lightblue fon rangidan foydalaning:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
O‘zingiz sinab ko‘ring »
Misol
Media so‘rovlar yordamida hujjat ekranda ko‘rsatilganda matn rangini yashil, chop etilganda esa qora qilib o‘rnating:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
O‘zingiz sinab ko‘ring »
Misol
Vergul bilan ajratilgan ro‘yxat: mavjud media so‘rovga vergul yordamida qo‘shimcha media so‘rov qo‘shing (bu OR operatori kabi ishlaydi):
/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS media so‘rovlar
CSS darsligi: CSS media so‘rovlar misollari
RWD darsligi: Media so‘rovlar bilan moslashuvchan veb-dizayn
JavaScript darsligi: window.matchMedia() metodi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!