Thuộc tính media của thẻ <source> HTML

Định nghĩa và cách sử dụng

media Tính năng này chấp nhận bất kỳ điều kiện tìm kiếm phương tiện hợp lệ nào thường được định nghĩa trong CSS.

Lưu ý:Tính năng này có thể chấp nhận nhiều giá trị.

Mô hình

Một yếu tố <picture> chứa hai tệp nguồn và một hình ảnh dự phòng:

<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>

Thử ngay lập tức

Cú pháp

<source media="media_query>

Toán tử có thể

Toán tử Mô tả
and Định nghĩa toán tử AND.
not Định nghĩa toán tử NOT.
, Định nghĩa toán tử OR.

Thiết bị

Giá trị Mô tả
all Mặc định. Dành cho tất cả các thiết bị.
aural Thiết bị tổng hợp giọng nói.
braille Thiết bị phản hồi Braille.
handheld Thiết bị cầm tay (màn hình nhỏ, băng thông hạn chế).
projection Máy chiếu.
print Chế độ xem trước in/địa điểm in.
screen Màn hình máy tính.
tty Máy đánh máy điện tử và các phương tiện tương tự sử dụng lưới字符 đều.
tv Thiết bị loại TV (độ phân giải thấp, khả năng phân trang hạn chế).

Giá trị

Giá trị Mô tả
width

Định nghĩa chiều rộng của khu vực hiển thị mục tiêu.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (min-width:500px)"

height

Định nghĩa chiều cao của khu vực hiển thị mục tiêu.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (max-height:700px)"

device-width

Định nghĩa chiều rộng của màn hình mục tiêu/giấy.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (device-width:500px)"

device-height

Định nghĩa chiều cao của màn hình mục tiêu/giấy.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (device-height:500px)"

orientation

Định nghĩa hướng của màn hình mục tiêu/giấy.

Giá trị có thể: "portrait" hoặc "landscape"

Ví dụ: media="all and (orientation: landscape)"

aspect-ratio

Định nghĩa tỷ lệ chiều rộng/chiều cao của khu vực hiển thị mục tiêu.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (aspect-ratio:16/9)"

device-aspect-ratio

Định nghĩa tỷ lệ device-width/device-height của màn hình mục tiêu/ giấy.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (aspect-ratio:16/9)"

color

Định nghĩa số bit của mỗi màu trên màn hình mục tiêu.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (color:3)"

color-index

Định nghĩa số lượng màu mà màn hình mục tiêu có thể xử lý.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (min-color-index:256)"

monochrome

Định nghĩa mỗi bit của pixel trong khung hình đơn sắc.

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="screen and (monochrome:2)"

resolution

Định nghĩa mật độ pixel của màn hình/ giấy mục tiêu (dpi hoặc dpcm).

Có thể sử dụng tiền tố "min-" và "max-".

Ví dụ: media="print and (resolution:300dpi)"

scan

Định nghĩa phương pháp quét của màn hình TV.

Giá trị có thể là: "progressive" và "interlace".

Ví dụ: media="tv and (scan:interlace)"

grid

Định nghĩa thiết bị đầu ra là lưới hay bitmap.

Giá trị có thể: "1" đại diện cho lưới, "0" là các giá trị khác.

Ví dụ: media="handheld and (grid:1)"

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

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