@media

Try it

abbr {
  color: #860304;
  font-weight: bold;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  abbr:hover {
    color: #001ca8;
    transition-duration: 0.5s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: " (" attr(title) ")";
  }
}

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
  U.S. government agency that is responsible for science and technology related
  to air and space.
</p>

Cú pháp

/* At the top level of your code */
@media screen and (width >= 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (width >= 900px) {
    article {
      display: flex;
    }
  }
}

At-rule @media có thể được đặt ở cấp cao nhất của code hoặc lồng bên trong bất kỳ conditional group at-rule nào khác.

Để thảo luận về cú pháp media query, hãy xem Using media queries.

Mô tả

<media-query-list> của media query bao gồm <media-type>s, <media-feature>s, và toán tử logic.

Loại phương tiện

<media-type> mô tả danh mục chung của thiết bị. Trừ khi sử dụng toán tử logic only, loại phương tiện là tùy chọn và kiểu all được ngầm hiểu.

all

Phù hợp với tất cả các thiết bị.

print

Dành cho tài liệu phân trang và các tài liệu được xem trên màn hình ở chế độ xem trước khi in. (Hãy xem paged media để biết thông tin về các vấn đề định dạng cụ thể cho các định dạng này.)

screen

Dành chủ yếu cho màn hình.

Tính năng phương tiện

<media feature> mô tả các đặc điểm cụ thể của user agent, thiết bị đầu ra, hoặc môi trường. Các biểu thức tính năng phương tiện kiểm tra sự hiện diện, giá trị, hoặc phạm vi giá trị của chúng, và hoàn toàn tùy chọn. Mỗi biểu thức tính năng phương tiện phải được bao quanh bởi dấu ngoặc đơn.

any-hover

Có cơ chế đầu vào nào có sẵn cho phép người dùng di chuột qua các phần tử không?

any-pointer

Có bất kỳ cơ chế đầu vào có sẵn nào là thiết bị trỏ không, và nếu có, nó chính xác đến mức nào?

aspect-ratio

aspect ratio chiều rộng so với chiều cao của viewport.

color

Số bit mỗi thành phần màu của thiết bị đầu ra, hoặc không nếu thiết bị không phải màu.

color-gamut

Phạm vi màu xấp xỉ được hỗ trợ bởi tác nhân người dùng và thiết bị đầu ra.

color-index

Số mục trong bảng tra cứu màu của thiết bị đầu ra, hoặc không nếu thiết bị không sử dụng bảng đó.

device-aspect-ratio

Tỷ lệ chiều rộng so với chiều cao của thiết bị đầu ra. Không còn dùng trong Media Queries Level 4.

device-height

Chiều cao của bề mặt kết xuất của thiết bị đầu ra. Không còn dùng trong Media Queries Level 4.

device-posture

Phát hiện tư thế hiện tại của thiết bị, tức là viewport đang ở trạng thái phẳng hay gập. Được định nghĩa trong Device Posture API.

device-width

Chiều rộng của bề mặt kết xuất của thiết bị đầu ra. Không còn dùng trong Media Queries Level 4.

display-mode

Chế độ hiển thị của ứng dụng: ví dụ, chế độ fullscreen hoặc picture-in-picture. Thêm vào trong Media Queries Level 5.

dynamic-range

Sự kết hợp của độ sáng, tỷ lệ tương phản, và độ sâu màu được hỗ trợ bởi tác nhân người dùng và thiết bị đầu ra. Thêm vào trong Media Queries Level 5.

forced-colors

Phát hiện xem tác nhân người dùng có hạn chế bảng màu không. Thêm vào trong Media Queries Level 5.

grid

Thiết bị sử dụng màn hình grid hay bitmap?

height

Chiều cao của viewport.

horizontal-viewport-segments

Phát hiện xem thiết bị có một số lượng phân đoạn viewport nhất định được bố trí theo chiều ngang không.

hover

Cơ chế đầu vào chính có cho phép người dùng di chuột qua các phần tử không?

inverted-colors

Tác nhân người dùng hoặc hệ điều hành nền tảng có đang đảo ngược màu sắc không? Thêm vào trong Media Queries Level 5.

monochrome

Bit mỗi pixel trong bộ đệm khung đơn sắc của thiết bị đầu ra, hoặc không nếu thiết bị không phải đơn sắc.

orientation

Hướng của viewport.

overflow-block

Thiết bị đầu ra xử lý nội dung tràn viewport dọc theo trục block như thế nào?

overflow-inline

Nội dung tràn viewport dọc theo trục inline có thể cuộn không?

pointer

Cơ chế đầu vào chính có phải là thiết bị trỏ không, và nếu có, nó chính xác đến mức nào?

prefers-color-scheme

Phát hiện xem người dùng thích màu sáng hay tối. Thêm vào trong Media Queries Level 5.

prefers-contrast

Phát hiện xem người dùng có yêu cầu hệ thống tăng hoặc giảm lượng tương phản giữa các màu liền kề không. Thêm vào trong Media Queries Level 5.

prefers-reduced-data

Phát hiện xem người dùng có yêu cầu nội dung web tiêu thụ ít lưu lượng internet hơn không.

prefers-reduced-motion

Người dùng thích ít chuyển động hơn trên trang. Thêm vào trong Media Queries Level 5.

prefers-reduced-transparency

Phát hiện xem người dùng có bật cài đặt trên thiết bị của họ để giảm các hiệu ứng lớp trong suốt hoặc bán trong suốt được sử dụng trên thiết bị không.

resolution

Mật độ pixel của thiết bị đầu ra.

scan

Đầu ra hiển thị là lũy tiến hay xen kẽ.

scripting

Phát hiện xem scripting (tức là JavaScript) có sẵn không. Thêm vào trong Media Queries Level 5.

shape

Phát hiện hình dạng của thiết bị để phân biệt màn hình hình chữ nhật và hình tròn.

update

Thiết bị đầu ra có thể sửa đổi giao diện nội dung với tần suất bao nhiêu.

vertical-viewport-segments

Phát hiện xem thiết bị có một số lượng phân đoạn viewport nhất định được bố trí theo chiều dọc không. Thêm vào trong Media Queries Level 5.

video-dynamic-range

Sự kết hợp của độ sáng, tỷ lệ tương phản, và độ sâu màu được hỗ trợ bởi mặt phẳng video của tác nhân người dùng và thiết bị đầu ra. Thêm vào trong Media Queries Level 5.

width

Chiều rộng của viewport bao gồm chiều rộng của thanh cuộn.

-moz-device-pixel-ratio

Số pixel thiết bị trên mỗi pixel CSS. Thay vào đó hãy sử dụng tính năng resolution với đơn vị dppx.

-webkit-animation

Trình duyệt hỗ trợ animation CSS có tiền tố -webkit. Thay vào đó hãy sử dụng feature query @supports (animation).

-webkit-device-pixel-ratio

Số pixel thiết bị trên mỗi pixel CSS. Thay vào đó hãy sử dụng tính năng resolution với đơn vị dppx.

-webkit-transform-2d

Trình duyệt hỗ trợ transform CSS 2D có tiền tố -webkit. Thay vào đó hãy sử dụng feature query @supports (transform).

-webkit-transform-3d

Trình duyệt hỗ trợ transform CSS 3D có tiền tố -webkit. Thay vào đó hãy sử dụng feature query @supports (transform).

-webkit-transition

Trình duyệt hỗ trợ transition CSS có tiền tố -webkit. Thay vào đó hãy sử dụng feature query @supports (transition).

Toán tử logic

Các toán tử logic not, and, only, và or có thể được dùng để tạo ra các media query phức tạp. Bạn cũng có thể kết hợp nhiều media query vào một quy tắc duy nhất bằng cách phân cách chúng bằng dấu phẩy.

and

Được dùng để kết hợp nhiều tính năng phương tiện vào một media query duy nhất, yêu cầu mỗi tính năng được kết hợp phải trả về true để query là true. Nó cũng được dùng để kết hợp các tính năng phương tiện với các loại phương tiện.

not

Được dùng để phủ định một media query, trả về true nếu query sẽ trả về false nếu không có nó. Nếu có trong danh sách các query phân cách bằng dấu phẩy, nó sẽ chỉ phủ định query cụ thể mà nó được áp dụng.

Note: Trong Level 3, từ khóa not không thể được dùng để phủ định một biểu thức tính năng phương tiện riêng lẻ, chỉ toàn bộ media query.

only

Áp dụng kiểu dáng chỉ khi toàn bộ query khớp. Nó hữu ích để ngăn các trình duyệt cũ hơn áp dụng các kiểu dáng được chọn. Khi không sử dụng only, các trình duyệt cũ hơn sẽ diễn giải query screen and (width <= 500px) là screen, bỏ qua phần còn lại của query, và áp dụng các kiểu dáng của nó trên tất cả các màn hình. Nếu bạn sử dụng toán tử only, bạn cũng phải chỉ định loại phương tiện.

, (dấu phẩy)

Dấu phẩy được dùng để kết hợp nhiều media query vào một quy tắc duy nhất. Mỗi query trong danh sách phân cách bằng dấu phẩy được xử lý riêng biệt với nhau. Do đó, nếu bất kỳ query nào trong danh sách là true, toàn bộ câu lệnh media trả về true. Nói cách khác, danh sách hoạt động như toán tử logic or.

or

Tương đương với toán tử ,. Thêm vào trong Media Queries Level 4.

Gợi ý client tác nhân người dùng

Một số media query có các gợi ý client tác nhân người dùng tương ứng. Đây là các HTTP header yêu cầu nội dung được tối ưu hóa trước cho yêu cầu phương tiện cụ thể. Chúng bao gồm Sec-CH-Prefers-Color-Scheme và Sec-CH-Prefers-Reduced-Motion.

Cú pháp chính thức

@media = 
  @media <media-query-list> { <rule-list> }  

Khả năng tiếp cận

Để phù hợp nhất với những người điều chỉnh kích thước văn bản của trang web, hãy sử dụng em khi bạn cần <length> cho media query của mình.

Cả em và px đều là các đơn vị hợp lệ, nhưng em hoạt động tốt hơn nếu người dùng thay đổi kích thước văn bản trình duyệt.

Cũng hãy xem xét sử dụng media query hoặc gợi ý client tác nhân người dùng HTTP để cải thiện trải nghiệm người dùng. Ví dụ, media query prefers-reduced-motion hoặc HTTP header tương đương Sec-CH-Prefers-Reduced-Motion) có thể được dùng để giảm thiểu lượng hoạt ảnh hoặc chuyển động được sử dụng dựa trên tùy chọn của người dùng.

Bảo mật

Vì media query cung cấp thông tin về các khả năng — và theo đó, các tính năng và thiết kế — của thiết bị mà người dùng đang làm việc, có khả năng chúng có thể bị lạm dụng để xây dựng một "dấu vân tay" nhận dạng thiết bị, hoặc ít nhất là phân loại nó ở một mức độ chi tiết nhất định có thể không mong muốn đối với người dùng.

Do khả năng này, trình duyệt có thể chọn làm mờ các giá trị được trả về theo một cách nào đó để ngăn chúng được sử dụng để nhận dạng chính xác một máy tính. Trình duyệt cũng có thể cung cấp các biện pháp bổ sung trong lĩnh vực này; ví dụ, nếu cài đặt "Resist Fingerprinting" của Firefox được bật, nhiều media query báo cáo các giá trị mặc định thay vì các giá trị đại diện cho trạng thái thiết bị thực tế.

Ví dụ

Kiểm tra loại phương tiện in ấn và màn hình

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Cú pháp phạm vi cho phép các media query ít dài dòng hơn khi kiểm tra bất kỳ tính năng nào chấp nhận một phạm vi, như được hiển thị trong các ví dụ bên dưới:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Để xem thêm ví dụ, hãy xem Using media queries.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Module CSS media queries
• Using media queries
• Giao diện CSSMediaRule
• At-rule CSS @custom-media
• Extended Mozilla media features
• Extended WebKit media features