Định nghĩa và sử dụng
- Thuộc tính media quy định cụ thể media hay thiết bị gì được hiển thị trong tài liệu liên quan.
- Liên kết với khai báo media sẽ giúp cho trình duyệt biết được liên kết tới một thiết bị đặc biệt nào đó, như điện thoại (smartphone), máy tính bảng (tablets), máy chiếu (projector), thiết bị print,...
- Có thể kết hợp nhiều giá trị trong thuộc tính media.
Cấu trúc
<tag media="giá trị"></tag>
Giá trị của thuộc tính media có thể bao gồm cả thiết bị:
Ví dụ
<a href="#" media="handheld and (max-device-width:2048px)"></tag>
<a href="#" media="print and (min-resolution:72dpi)"></tag>
Toán tử kết hợp có thể là: and, or, dấu phẩy ","
Giá trị
| Giá trị | Ví dụ | Mô tả |
|---|---|---|
| width | media="width:960px" | Xác định chiều rộng của vùng hiển thị được liên kết. |
| min-width | media="min-width:640px" | Xác định chiều rộng nhỏ nhất của vùng hiển thị được liên kết. |
| max-width | media="max-width:960px" | Xác định chiều rộng lớn nhất của vùng hiển thị được liên kết. |
| height | media="height:960px" | Xác định chiều cao của vùng hiển thị được liên kết. |
| min-height | media="min-height:460px" | Xác định chiều cao nhỏ nhất của vùng hiển thị được liên kết. |
| max-height | media="max-height:960px" | Xác định chiều cao lớn nhất của vùng hiển thị được liên kết. |
| device-width | media="device-width:2048px" | Xác định chiều rộng của thiết bị được liên kết. |
| min-device-width | media="min-device-width:1536px" | Xác định chiều rộng nhỏ nhất của thiết bị được liên kết. |
| max-device-width | media="max-device-width:2048px" | Xác định chiều rộng lớn nhất của thiết bị được liên kết. |
| device-height | media="device-height:2048px" | Xác định chiều cao của thiết bị được liên kết. |
| min-device-height | media="min-device-height:1536px" | Xác định chiều cao nhỏ nhất của thiết bị được liên kết. |
| max-device-height | media="max-device-height:2048px" | Xác định chiều cao lớn nhất của thiết bị được liên kết. |
| orientation | Có 2 giá trị: media="orientation:portrait" media="orientation:landscape" |
Xác định thiết bị được định hướng nằm dọc (portrait) hay nằm ngang (landscape) khi được liên kết. |
| aspect-ratio | media="aspect-ratio:4/3" | Xác định tỷ lệ của chiều cao/chiều rộng được liên kết. |
| min-aspect-ratio | media="min-aspect-ratio:4/3" | Xác định tỷ lệ nhỏ nhất của chiều cao/chiều rộng được liên kết. |
| max-aspect-ratio | media="max-aspect-ratio:4/3" | Xác định tỷ lệ lớn nhất của chiều cao/chiều rộng được liên kết. |
| device-aspect-ratio | media="device-aspect-ratio:4/3" | Xác định tỷ lệ của chiều cao/chiều rộng của thiết bị được liên kết. |
| min-device-aspect-ratio | media="min-device-aspect-ratio:4/3" | Xác định tỷ lệ thấp nhất của chiều cao/chiều rộng của thiết bị được liên kết. |
| max-device-aspect-ratio | media="max-device-aspect-ratio:4/3" | Xác định tỷ lệ cao nhất của chiều cao/chiều rộng của thiết bị được liên kết. |
| color | media="color:24" | Xác định số bit/color của mục tiêu được liên kết. |
| min-color | media="min-color:3" | Xác định số bit/color ít nhất của mục tiêu được liên kết. |
| max-color | media="max-color:24" | Xác định số bit/color nhiều nhất của mục tiêu được liên kết. |
| color-index | media="color-index" | Xác định số lượng màu sắc có thể xử lý được của thiết bị được liên kết. |
| min-color-index | media="min-color-index:256" | Xác định số lượng màu sắc ít nhất có thể xử lý được của thiết bị được liên kết. |
| max-color-index | media="max-color-index:256" | Xác định số lượng màu sắc nhiều nhất có thể xử lý được của thiết bị được liên kết. |
| monochrome | media="monochrome:2" | Xác định số lượng bit/pixel trong một khung đơn sắc. |
| min-monochrome | media="min-monochrome:2" | Xác định số lượng bit/pixel ít nhất trong một khung đơn sắc. |
| max-monochrome | media="max-monochrome:2" | Xác định số lượng bit/pixel nhiều nhất trong một khung đơn sắc. |
| resolution | media="resolution:300dpi" | Xác định mật độ điểm ảnh của mục tiêu liên kết. |
| min-resolution | media="min-resolution:72dpi" | Xác định mật độ điểm ảnh ít nhất của mục tiêu liên kết. |
| max-resolution | media="max-resolution:300dpi" | Xác định mật độ điểm ảnh cao nhất của mục tiêu liên kết. |
| scan | Có 2 giá trị: media="scan:progressive" media="scan:interlace" |
Xác định cụ thể phương pháp quét màn hình của mục tiêu liên kết (thường là Tivi). |
| grid | Có 2 giá trị: media="grid:1" media="grid:0" |
Xác định thiết bị đầu ra là grid (giá trị 1) hay bitmap (giá trị 0). |
| Thiết bị | ||
| all | media="all" | Đây là dạng mặc định, phù hợp cho tất cả các thiết bị, thường sử dụng cho thẻ <link /> |
| aural | media="aural" | Điều khiển ngõ ra của thiết bị âm thanh. |
| braille | media="braille" | Điều khiển thiết bị chữ nổi Braille (dành cho người khiếm thị). |
| handheld | media="handheld" | Điều khiển thiết bị cầm tay. |
| projection | media="projection" | Điều khiển máy chiếu. |
| media="print" | Điều khiển việc in ấn, thường dành cho print preview, thường dùng cho thẻ <link />, xem ví dụ. | |
| screen | media="screen" | Điều khiển chỉ màn hình hiển thị, thường dùng cho thẻ <link />, xem ví dụ. |
| tty | media="tty" | Điều khiển thiết bị điện báo. |
| tv | media="tv" | Điều khiển thiết bị như Tivi. |