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

Thẻ <link> HTML

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

media Thuộc tính quy định tài nguyên mục tiêu đã được tối ưu hóa cho phương tiện/đevice nào.

media Thuộc tính chỉ định thiết bị mà tài liệu liên kết sẽ hiển thị.

Thuộc tính này chủ yếu được sử dụng cùng với bảng phong cách CSS, để chỉ định phong cách khác nhau cho các loại phương tiện khác nhau.

media Thuộc tính có thể chấp nhận nhiều giá trị.

Mẫu

Hai loại bảng phong cách khác nhau cho hai loại phương tiện khác nhau (màn hình và in):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Thử ngay

Ngữ pháp

<link media="giá trị>

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ị

Thiết bị Mô tả
all Mặc định. Dùng cho tất cả các loại thiết bị phương tiện.
print Dùng cho chế độ xem trước in hoặc trang in.
screen Dùng cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.
speech Máy đọc màn hình để đọc trang.
aural Đã bỏ qua.Máy tổng hợp giọng nói.
braille Đã bỏ qua.Thiết bị phản hồi braille.
handheld Đã bỏ qua.Thiết bị cầm tay (màn hình nhỏ, băng thông hạn chế).
projection Đã bỏ qua.Máy chiếu.
tty Đã bỏ qua.Điện thọa máy đánh chữ và các phương tiện tương tự sử dụng lưới ký tự cố định.
tv Đã bỏ qua.Thiết bị loại truyền hình (độ phân giải thấp, khả năng cuộn hạn chế).

Giá trị

Giá trị Mô tả
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)"
color

Định nghĩa số bit của mỗi màu trên màn hình hiển thị 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 hiển thị 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)"
device-aspect-ratio Đã bỏ qua.Định nghĩa tỷ lệ device-width/device-height của màn hình hiển thị hoặc giấy mục tiêu.
device-width Đã bỏ qua.Định nghĩa chiều rộng của màn hình hiển thị hoặc giấy mục tiêu.
device-height Đã bỏ qua.Định nghĩa chiều cao của màn hình hiển thị hoặc giấy mục tiêu.
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)"
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)"
monochrome

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

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

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

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

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

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

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

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

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Thẻ <link> HTML