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