HTML <source> media attribute

HTML <source> ຕາມ

ການອະທິບາຍແລະການນຳໃຊ້

media ບັນດາມູນຄ່ານີ້ຍອມຮັບທັງໝົດຂອງ media query ທີ່ມັກການສະແດງໃນ CSS.

ເຂົ້າໃຈ:ບັນດາມູນຄ່ານີ້ສາມາດຍອມຮັບຫຼາຍວັດຖຸ.

ຄວາມຈິງ

ອົງປະກອບທີ່ມີແຫຼ່ງຂໍ້ມູນສອງອັນແລະພາບຫຼັງການ: <picture> element:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

ທຳການຕົວຢ່າງ

ຂອບຂອງພາສານ

<source media="media_query>

ອຸປະກອນທຳນາຍທີ່ສາມາດມີ.

ອຸປະກອນທຳນາຍ ການອະທິບາຍ
and ກໍານົດຄວາມຕາມການທຳນາຍ AND.
not ກໍານົດຄວາມຕາມການທຳນາຍ NOT.
, ກໍານົດຄວາມຕາມການທຳນາຍ OR.

ອຸປະກອນ

ຈຸດຕິດຕາມ ການອະທິບາຍ
all ການປະກອບຄືນ/ທຳມະດາ.
aural ການສົ່ງສັນຍາວ່າດ.
braille ອຸປະກອນສະແດງຂໍ້ຄວາມພາສາບົວ.
handheld ອຸປະກອນມືຂາຍດາວ (ສະແດງສູງຫຼາຍ, ການເບິ່ງບໍ່ມີການບໍ່ພຽງພໍ).
projection ເຄື່ອງກະຈາຍຕາມ.
print ການກະຈາຍຄືນ/ການກະຈາຍສຳລັບສຳລັບການບາງບັນຍາ.
screen ເບດກະຈາຍຄວາມຄິດຂອງຄອມພິວເຕີບ.
tty ການເບິ່ງທີ່ຂັບຂອງການສົ່ງສັນຍາສຳລັບການທີ່ບໍ່ມີການກະຈາຍກັບສານຍາດກະຈາຍຂັບ.
tv ອຸປະກອນທີ່ອານຸກອາກາດທີ່ມີຄວາມຈັດການບໍ່ສູງ, ການເວັບບາງບັນຍາການເບິ່ງສຳລັບຄືນ.

ຈຸດຕິດຕາມ

ຈຸດຕິດຕາມ ການອະທິບາຍ
width

ກໍານົດຈຸດຕິດຕາມຂະໜາດຫຼາຍຂອງຂອບຂ້າງຈຸດຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (min-width:500px)"
height

ກໍານົດຈຸດຕິດຕາມຂະໜາດຫຼາຍຂອງຂອບຂ້າງຈຸດຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (max-height:700px)"
device-width

ກໍານົດຈຸດຕິດຕາມຂະໜາດທີ່ຫຼາຍຂອງເຄື່ອງອອກສະແດງທີ່ຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (device-width:500px)"
device-height

ກໍານົດຈຸດຕິດຕາມຂະໜາດຫຼາຍຂອງເຄື່ອງອອກສະແດງທີ່ຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (device-height:500px)"
orientation

ກໍານົດຈຸດຕິດຕາມທິດທາງຈາກເຄື່ອງອອກສະແດງທີ່ຕິດຕາມ.

ຈຸດຕິດຕາມ: "portrait" ຫຼື "landscape"

ຕົວຢ່າງ: media="all and (orientation: landscape)"
aspect-ratio

ກໍານົດຈຸດຕິດຕາມການດ້ານຫຼາຍ/ຫຼາຍຂອງຂອບຂ້າງຈຸດຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

ກໍານົດຈຸດຕິດຕາມການດ້ານຫຼາຍ/ຫຼາຍຂອງ device-width/device-height.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (aspect-ratio:16/9)"
color

ກໍານົດຈຸດຕິດຕາມສິບສີທີ່ອາດຈັດການຈາກເຄື່ອງອອກສະແດງທີ່ຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (color:3)"
color-index

ກໍານົດຈຸດຕິດຕາມເຄື່ອງອອກສະແດງທີ່ສາມາດຈັດການສີຫຼາຍສຳລັບຈຸດຕິດຕາມ.

Prefixes "min-" and "max-" can be used.

ຕົວຢ່າງ: media="screen and (min-color-index:256)"
monochrome

Specifies the number of bits per pixel in a monochrome frame buffer.

Prefixes "min-" and "max-" can be used.

Example: media="screen and (monochrome:2)"
resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.

Prefixes "min-" and "max-" can be used.

Example: media="print and (resolution:300dpi)"
scan

Specifies the scanning method of the TV display.

Possible values are: "progressive" and "interlace".

Example: media="tv and (scan:interlace)"
grid

Specifies whether the output device is a grid or bitmap.

Possible values: "1" represents grid, "0" is other.

Example: media="handheld and (grid:1)"

Browser Support

ຈຳນວນຕົວເລກໃນຕາລາງສະແດງວ່າສະບາຍອາດບັນລຸການສະບາຍຂອງຄັນປະຈຳສະບາຍທີ່ເປັນສະບາຍທຳອິດ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> ຕາມ