media
HTML <source> media atributi
Misol
Ikkita manba fayli va zaxira rasmga ega <picture> elementi:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
media atributi odatda CSS’da belgilanadigan har qanday yaroqli media so‘rovini (media query) qabul qiladi.
Eslatma: Bu atribut bir nechta qiymat qabul qilishi mumkin.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi raqamlar atributni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Atribut | |||||
|---|---|---|---|---|---|
| media | 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
Sintaksis
<source media="media_query">
Mumkin bo‘lgan operatorlar
| Qiymat | Tavsif |
|---|---|
| and | AND operatorini belgilaydi |
| not | NOT operatorini belgilaydi |
| , | OR operatorini belgilaydi |
Qurilmalar
| Qiymat | Tavsif |
|---|---|
| all | Barcha qurilmalar uchun mos. Bu standart qiymat |
| aural | Nutq sintezatorlari |
| braille | Brayl yozuvi orqali ma’lumot beruvchi qurilmalar |
| handheld | Ko‘chma (qo‘lda olib yuriladigan) qurilmalar (kichik ekran, cheklangan tarmoq o‘tkazuvchanligi) |
| projection | Proyektorlar |
| Chop etishni oldindan ko‘rish rejimi/chop etilgan sahifalar | |
| screen | Kompyuter ekranlari |
| tty | Teletayplar va qat’iy kenglikdagi belgilar to‘ridan foydalanadigan shunga o‘xshash vositalar |
| tv | Televizor turidagi qurilmalar (past aniqlik, cheklangan aylantirish imkoniyati) |
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| width | Maqsadli displey maydonining kengligini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (min-width:500px)" |
| height | Maqsadli displey maydonining balandligini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (max-height:700px)" |
| device-width | Maqsadli displey/qog‘ozning kengligini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (device-width:500px)" |
| device-height | Maqsadli displey/qog‘ozning balandligini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (device-height:500px)" |
| orientation | Maqsadli displey/qog‘ozning yo‘nalishini (orientatsiyasini) belgilaydi. Mumkin bo‘lgan qiymatlar: "portrait" yoki "landscape" Misol: media="all and (orientation: landscape)" |
| aspect-ratio | Maqsadli displey maydonining kenglik/balandlik nisbatini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Maqsadli displey/qog‘ozning device-width/device-height nisbatini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (aspect-ratio:16/9)" |
| color | Maqsadli displeyning har bir rang uchun bitlar sonini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (color:3)" |
| color-index | Maqsadli displey qo‘llab-quvvatlay oladigan ranglar sonini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (min-color-index:256)" |
| monochrome | Monoxrom kadr buferidagi har bir piksel uchun bitlar sonini belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="screen and (monochrome:2)" |
| resolution | Maqsadli displey/qog‘ozning piksel zichligini (dpi yoki dpcm) belgilaydi. "min-" va "max-" prefikslaridan foydalanish mumkin. Misol: media="print and (resolution:300dpi)" |
| scan | Televizor displeyining skanerlash usulini belgilaydi. Mumkin bo‘lgan qiymatlar: "progressive" va "interlace". Misol: media="tv and (scan:interlace)" |
| grid | Chiqarish qurilmasi to‘rli (grid) yoki bitmap ekanligini belgilaydi. Mumkin bo‘lgan qiymatlar: grid uchun "1", aks holda "0". Misol: media="handheld and (grid:1)" |
❮ HTML <source> tegi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!