Thuộc tính <style> media

Thẻ <style> HTML

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

media Thuộc tính được sử dụng để quy định phương tiện hoặc thiết bị mà phong cách CSS nhắm đến (tối ưu hóa).

Thuộc tính này được sử dụng để quy định phong cách áp dụng cho thiết bị cụ thể (như iPhone), giọng nói hoặc phương tiện in.

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

Bài mẫu

Ví dụ 1

Quy định phong cách cho in:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Thử trực tiếp

Ví dụ 2

Sử dụng đặc tính width của thuộc tính media để phân biệt hai nhóm phong cách:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Thử trực tiếp

Chú ý:Khi độ rộng cửa sổ trình duyệt nhỏ hơn 500 pixel, bạn sẽ sử dụng nhóm phong cách đầu tiên,而当窗口宽度大于 500 像素时，您将使用第二组。

Ngữ pháp

<style media="giá trị>

Toán tử có thể

Toán tử mô tả
and Quy định toán tử AND.
not Quy định toán tử NOT.
, Quy định toán tử OR.

Điều kiện sử dụng của phong cách có thể được thiết kế rất chi tiết. Đầu tiên cần phải làm rõ là loại thiết bị mà bạn nhắm đến. Bảng sau tóm tắt tất cả các giá trị phù hợp với quy định:

Thiết bị

Thiết bị mô tả
all Mặc định. Áp dụng cho tất cả các thiết bị.
aural Máy 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/định dạng trang 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 ký tự có khoảng cách cố định.
tv Thiết bị loại truyền hình (độ phân giải thấp, khả năng cuộn hạn chế).

Trình duyệt chịu trách nhiệm giải thích loại thiết bị. Một số loại thiết bị (như screen và print) có cách giải thích tương đối nhất quán trên các trình duyệt khác nhau, nhưng một số thiết bị khác (như handheld) có thể giải thích rất ngẫu nhiên. Do đó, việc kiểm tra xem trình duyệt mà bạn nhắm đến có giải thích về thiết bị cụ thể với mình là rất cần thiết.

tính năng

tính năng mô tả
width

định nghĩa chiều rộng của khu vực hiển thị tiêu chuẩn.

thuộc tính "min-" và "max-" có thể được sử dụng.

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

định nghĩa chiều cao của khu vực hiển thị tiêu chuẩn.

thuộc tính "min-" và "max-" có thể được sử dụng.

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

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

thuộc tính "min-" và "max-" có thể được sử dụng.

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

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

thuộc tính "min-" và "max-" có thể được sử dụng.

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

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

giá trị được hỗ trợ: portrait hoặc landscape.

Tính năng này không có限定词。

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ị tiêu chuẩn.

thuộc tính "min-" và "max-" có thể được sử dụng.

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

định nghĩa tỷ lệ chiều rộng / chiều cao của thiết bị trên màn hình tiêu chuẩn / giấy.

thuộc tính "min-" và "max-" có thể được sử dụng.

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 tiêu chuẩn.

thuộc tính "min-" và "max-" có thể được sử dụng.

ví dụ: media="screen and (color:3)"
color-index

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

thuộc tính "min-" và "max-" có thể được sử dụng.

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

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

thuộc tính "min-" và "max-" có thể được sử dụng.

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

định nghĩa mật độ điểm ảnh (dpi hoặc dpcm) của màn hình tiêu chuẩn / giấy.

thuộc tính "min-" và "max-" có thể được sử dụng.

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

định nghĩa chế độ quét của truyền hình.

giá trị được hỗ trợ có progressive và interlace.

Tính năng này không có限定词。

ví dụ: media="tv and (scan:interlace)"
lưới

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

Thiết bị lưới sử dụng lưới cố định để hiển thị nội dung, ví dụ như thiết bị đầu cuối dựa trên ký tự và máy nhắn tin hiển thị một dòng.

Các giá trị được hỗ trợ có 0 và 1 (1 đại diện cho thiết bị lưới).

Tính năng này không có限定词。

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

Các tính năng như width thường được sử dụng cùng với限定词 min và max. Không cần sử dụng các限定词, để phong cách sử dụng phụ thuộc vào kích thước cửa sổ rất chính xác cũng được, nhưng thêm các限定词 sẽ làm điều kiện trở nên linh hoạt hơn.

Bảng trên liệt kê và giới thiệu các tính năng có thể sử dụng. Nếu không được nêu rõ, các tính năng này đều có thể được修饰 bằng min- và max-, tạo thành giá trị ngưỡng而不是 giá trị chính xác.

Tương tự như các thiết bị quy định, các tính năng này cũng do trình duyệt chịu trách nhiệm giải thích. Về việc trình duyệt nhận biết các tính năng nào và xác định các tính năng đó khi nào có thể và có thể sử dụng, tình hình rất phức tạp. Nếu muốn áp dụng các tính năng này cho phong cách, hãy chắc chắn tiến hành kiểm tra toàn diện và chuẩn bị các phong cách dự phòng trong trường hợp tính năng không thể sử dụng.

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ẻ <style> HTML