CSS @media quy tắc

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

@media quy tắc được sử dụng trong media query để áp dụng các phong cách khác nhau cho các loại phương tiện hoặc thiết bị khác nhau.

Media query có thể được sử dụng để kiểm tra nhiều điều kiện, chẳng hạn như:

  • Chiều rộng và chiều cao của viewport
  • Chiều rộng và chiều cao của thiết bị
  • Hướng (điện thoại hoặc máy tính bảng ở chế độ ngang hoặc dọc?)
  • Độ phân giải

Sử dụng media query là một kỹ thuật phổ biến để cung cấp các bảng樣式 tùy chỉnh cho máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động (thiết kế trang web tương ứng).

Bạn có thể sử dụng media query để quy định một số phong cách chỉ áp dụng cho tài liệu in hoặc trình đọc màn hình (mediatype: in, màn hình hoặc giọng nói).

Ngoài loại truyền thông, còn có các đặc tính truyền thông. Các đặc tính truyền thông cung cấp thêm chi tiết cụ thể cho truy vấn truyền thông bằng cách cho phép kiểm tra các đặc tính cụ thể của người dùng代理 hoặc thiết bị hiển thị. Ví dụ, bạn có thể áp dụng phong cách chỉ cho màn hình có chiều rộng lớn hơn hoặc nhỏ hơn một giá trị cụ thể.}

Xem thêm:

Hướng dẫn CSS:Truy vấn truyền thông CSS

Hướng dẫn CSS:Ví dụ thực hành CSS truyền thông

Hướng dẫn RWD:Thực hiện thiết kế Web tương tác thông qua truy vấn truyền thông

Sách tham khảo JavaScript:Phương pháp window.matchMedia()

Mô hình

Ví dụ 1

Nếu chiều rộng của cửa sổ trình duyệt là 600px hoặc nhỏ hơn, thay đổi màu nền của phần tử <body> thành "xanh nhạt":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Thử ngay

Bạn có thể tìm thấy thêm các ví dụ TIY ở dưới cùng của trang.

Ngữ pháp CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  Mã CSS;
}

Ý nghĩa của từ khóa not, only và and:

not: từ khóa not ngược lại ý nghĩa của truy vấn truyền thông.

only: từ khóa only sẽ ngăn trình duyệt phiên bản cũ áp dụng các phong cách được chỉ định, các trình duyệt này không hỗ trợ các truy vấn truyền thông có đặc tính truyền thông. Nó không có ảnh hưởng gì đến trình duyệt hiện đại.

and: từ khóa and sẽ kết hợp đặc tính truyền thông với loại truyền thông hoặc các đặc tính truyền thông khác.

Họ đều là tùy chọn. Tuy nhiên, nếu sử dụng not hoặc only, bạn cũng phải chỉ định loại truyền thông.

Bạn có thể sử dụng các stylesheet khác nhau cho các loại truyền thông khác nhau, như sau:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Loại truyền thông

Giá trị Mô tả
all Mặc định. Sử dụng cho tất cả các loại thiết bị truyền thông.
print Để sử dụng trên máy in.
screen Để sử dụng trên màn hình máy tính, máy tính bảng, điện thoại thông minh và nhiều thiết bị khác.
speech Để đọc trang web

Đặc tính truyền thông

Giá trị Mô tả
any-hover

Có bất kỳ cơ chế đầu vào nào cho phép người dùng (như chuột) dừng trên phần tử không?

Được thêm vào Truy vấn truyền thông Cấp 4.
any-pointer

Có bất kỳ thiết bị con trỏ nào trong các cơ chế đầu vào có sẵn không, nếu có, độ chính xác của nó như thế nào?

Được thêm vào Truy vấn truyền thông Cấp 4.
tỷ lệ khung hình Tỷ lệ chiều rộng và chiều cao của khung nhìn (viewport).
color

Số bit của mỗi pixel trên thiết bị đầu ra, phổ biến có 8, 16, 32 bit.

Nếu thiết bị không hỗ trợ đầu ra màu, giá trị này sẽ là 0.
color-gamut

Mức độ hỗ trợ của người dùng đại lý và thiết bị đầu ra đối với dải màu.

Được thêm vào Truy vấn truyền thông Cấp 4.
color-index

Số lượng mục trong bảng tra cứu màu sắc (color lookup table) của thiết bị đầu ra.

Nếu thiết bị không sử dụng bảng tra cứu màu sắc, giá trị này sẽ là 0.
device-aspect-ratio

Tỷ lệ chiều rộng và chiều cao của thiết bị đầu ra.

Đã bị hủy bỏ trong Media Queries Level 4.
device-height

Chiều cao của bề mặt hiển thị của thiết bị đầu ra (ví dụ như màn hình).

Đã bị hủy bỏ trong Media Queries Level 4.
device-width

Chiều rộng của bề mặt hiển thị của thiết bị đầu ra (ví dụ như màn hình).

Đã bị hủy bỏ trong Media Queries Level 4.
display-mode

Chế độ hiển thị của ứng dụng, được chỉ định bởi thành viên display trong manifest của web app.

Được định nghĩa trong spec Web App Manifest.
forced-colors

Kiểm tra người dùng đại lý có hạn chế bảng màu không?

Được thêm vào Truy vấn truyền thông Cấp 5.
grid Thiết bị đầu ra sử dụng màn hình lưới hay màn hình điểm?
height Chiều cao của khung nhìn (viewport).
hover

Chế độ chính vào liệu có cho phép người dùng để trỏ chuột trên phần tử không?

Được thêm vào Truy vấn truyền thông Cấp 4.
inverted-colors

Trình duyệt hoặc hệ điều hành cơ bản có đảo ngược màu sắc không?

Được thêm vào Truy vấn truyền thông Cấp 5.
light-level

Mức độ ánh sáng hiện tại của môi trường.

Được thêm vào Truy vấn truyền thông Cấp 5.
max-aspect-ratio Tỷ lệ giữa chiều rộng và chiều cao của khu vực hiển thị tối đa.
max-color Số bit tối đa của mỗi thành phần màu sắc trên thiết bị đầu ra.
max-color-index Số lượng màu sắc mà thiết bị có thể hiển thị tối đa.
max-height Chiều cao tối đa của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
max-monochrome Số bit tối đa của mỗi 'màu sắc' trên thiết bị đơn sắc (grayscale).
max-resolution Độ phân giải tối đa của thiết bị, sử dụng dpi hoặc dpcm.
max-width Chiều rộng tối đa của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
min-aspect-ratio Tỷ lệ giữa chiều rộng và chiều cao của khu vực hiển thị.
min-color Số bit tối thiểu của mỗi thành phần màu sắc trên thiết bị đầu ra.
min-color-index Số lượng màu sắc mà thiết bị có thể hiển thị.
min-height Chiều cao tối thiểu của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
min-monochrome Độ phân giải tối thiểu trên thiết bị đơn sắc (grayscale) cho mỗi 'màu sắc'.
min-resolution Độ phân giải thấp nhất của thiết bị, sử dụng dpi hoặc dpcm.
min-width Độ rộng tối thiểu của khu vực hiển thị, ví dụ như cửa sổ trình duyệt.
monochrome

Độ sâu bit của mỗi pixel trong buuffer màu đơn色 của thiết bị đầu ra.

Nếu thiết bị không phải là màn hình đen trắng, giá trị này là 0.
orientation Hướng quay của khung nhìn (viewport) (chính là chế độ ngang hoặc dọc).
overflow-block

Cách thiết bị đầu ra xử lý nội dung tràn ra khung nhìn (viewport) theo trục-block.

Được thêm vào Truy vấn truyền thông Cấp 4.
overflow-inline

Nội dung chảy theo trục-inline có thể cuộn khi tràn ra khung nhìn (viewport) không?

Được thêm vào Truy vấn truyền thông Cấp 4.
pointer

Chủ yếu là cơ chế đầu vào là thiết bị con trỏ không? Nếu có, độ chính xác của nó như thế nào?

Được thêm vào Truy vấn truyền thông Cấp 4.
prefers-color-scheme

Người dùng có倾向于 chọn màu sáng hay màu tối trong phối màu không.

Được thêm vào Truy vấn truyền thông Cấp 5.
prefers-contrast

Đoạn mã đo người dùng có yêu cầu hệ thống tăng hoặc giảm độ tương phản giữa màu相近 không.

Được thêm vào Truy vấn truyền thông Cấp 5.
prefers-reduced-motion

Người dùng có muốn có ít hiệu ứng động hơn trên trang web không.

Được thêm vào Truy vấn truyền thông Cấp 5.
prefers-reduced-transparency

Người dùng có倾向于 chọn độ trong suốt thấp hơn không.

Được thêm vào Truy vấn truyền thông Cấp 5.
resolution Độ phân giải của thiết bị đầu ra, sử dụng dpi hoặc dpcm.
scan Quá trình quét của thiết bị đầu ra (áp dụng cho TV, v.v.).
scripting

Đoạn mã (ví dụ: JavaScript) có thể sử dụng được không.

Được thêm vào Truy vấn truyền thông Cấp 5.
update

Tần suất cập nhật nội dung render của thiết bị đầu ra.

Được thêm vào Truy vấn truyền thông Cấp 4.
width Độ rộng của khung nhìn (viewport).

More examples

Ví dụ 2

Khi độ rộng của trình duyệt là 600px hoặc nhỏ hơn, ẩn phần tử:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Thử ngay

Ví dụ 3

Nếu độ rộng của khung nhìn là 800 pixel hoặc lớn hơn, hãy sử dụng truy vấn truyền thông để đặt màu nền là hồng ngọc; nếu độ rộng của khung nhìn介于 400 đến 799 pixel, hãy sử dụng truy vấn truyền thông để đặt màu nền là xanh lá cây nhạt. Nếu khung nhìn nhỏ hơn 400 pixel, màu nền sẽ là xanh nhạt:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

Thử ngay

Ví dụ 4

Tạo một menu điều hướng tương tác (hiển thị ngang trên màn hình lớn và dọc trên màn hình nhỏ):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Thử ngay

Ví dụ 5

Sử dụng truy vấn truyền thông để tạo布局 cột tương tác:

/* Trên màn hình 992px hoặc nhỏ hơn, chuyển từ bốn cột thành hai cột */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Trên màn hình có chiều rộng nhỏ hơn hoặc bằng 600 pixel, để các cột chồng lên nhau thay vì hiển thị song song */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Thử ngay

Ví dụ 6

Sử dụng truy vấn truyền thông để tạo trang web tương tác:

Thử ngay

Ví dụ 7

Truy vấn truyền thông cũng có thể được sử dụng để thay đổi布局 của trang web dựa trên hướng của trình duyệt. Bạn có thể viết một nhóm thuộc tính CSS, chỉ áp dụng khi chiều rộng của cửa sổ trình duyệt lớn hơn chiều cao (tức là hướng "ngang").

Nếu hướng ở chế độ màn hình ngang, hãy sử dụng màu nền màu xanh dương nhạt:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Thử ngay

Ví dụ 8

Sử dụng truy vấn truyền thông để đặt màu văn bản là xanh lá cây khi hiển thị tài liệu trên màn hình và đen khi in:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Thử ngay

Ví dụ 9

Danh sách phân cách bằng dấu phẩy: Sử dụng dấu phẩy để thêm một truy vấn truyền thông vào truy vấn truyền thông hiện có (hành vi tương tự như toán tử OR):

/* Khi chiều rộng nằm giữa 600px và 900px hoặc lớn hơn 1100px - thay đổi外观 của <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng chú thích是完全支持 @media quy tắc của phiên bản trình duyệt đầu tiên.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9