Thiết lập lại truy vấn phương tiện css

Quy tắc tại @media có thể được đặt ở cấp cao nhất trong mã của bạn hoặc được lồng bên trong bất kỳ mã nào khác

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

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

Để thảo luận về cú pháp truy vấn phương tiện, vui lòng xem

Loại phương tiện mô tả danh mục chung của thiết bị. Ngoại trừ khi sử dụng toán tử logic not hoặc only, loại phương tiện là tùy chọn và loại

@media = 
  @media  {  }  

@media = 
  @media  {  }  

Thích hợp cho tất cả các thiết bị

@media = 
  @media  {  }  

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

@media = 
  @media  {  }  

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

Ghi chú. CSS2. 1 và xác định một số loại phương tiện bổ sung (

@media = 
  @media  {  }  

@media = 
  @media  {  }  

@media = 
  @media  {  }  

@media = 
  @media  {  }  

@media = 
  @media  {  }  

@media = 
  @media  {  }  

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Các tính năng phương tiện mô tả các đặc điểm cụ thể của tác nhân người dùng, thiết bị đầu ra hoặc môi trường. Biểu thức tính năng phương tiện kiểm tra sự hiện diện hoặc giá trị của chúng và hoàn toàn không bắt buộc. 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

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Có bất kỳ cơ chế nhập sẵn có nào cho phép người dùng di chuột qua các phần tử không?

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Có bất kỳ cơ chế đầu vào khả dụng nào là thiết bị trỏ không và nếu có thì độ chính xác của nó là bao nhiêu?

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Tỷ lệ khung hình từ chiều rộng đến chiều cao của khung nhìn

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Số bit trên mỗi thành phần màu của thiết bị đầu ra hoặc bằng 0 nếu thiết bị không có màu

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Phạm vi màu gần đúng được hỗ trợ bởi tác nhân người dùng và thiết bị đầu ra. Đã thêm vào Truy vấn phương tiện cấp 4

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Số mục nhập trong bảng tra cứu màu của thiết bị đầu ra hoặc bằng 0 nếu thiết bị không sử dụng bảng như vậy

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Tỷ lệ khung hình giữa chiều rộng và chiều cao của thiết bị đầu ra. Không dùng nữa trong Truy vấn phương tiện cấp 4

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Chiều cao của bề mặt dựng hình của thiết bị đầu ra. Không dùng nữa trong Truy vấn phương tiện cấp 4

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Chiều rộng của bề mặt dựng hình của thiết bị đầu ra. Không dùng nữa trong Truy vấn phương tiện cấp 4

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

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

Chế độ hiển thị của ứng dụng, như được chỉ định trong thành viên của bảng kê khai ứng dụng web. Được xác định trong

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

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

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 Truy vấn phương tiện cấp 5

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

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

Phát hiện xem tác nhân người dùng có hạn chế bảng màu hay không. Đã thêm vào Truy vấn phương tiện cấp 5

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

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

Thiết bị có sử dụng màn hình lưới hoặc bitmap không?

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

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

Chiều cao của khung nhìn

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

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

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

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

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

Là tác nhân người dùng hoặc hệ điều hành cơ bản đảo ngược màu sắc?

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

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

Số bit trên mỗi pixel trong bộ đệm khung đơn sắc của thiết bị đầu ra hoặc bằng 0 nếu thiết bị không phải là đơn sắc

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

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

Định hướng của khung nhìn

Làm thế nào để thiết bị đầu ra xử lý nội dung tràn qua khung nhìn dọc theo trục khối?

Nội dung tràn qua khung nhìn dọc theo trục nội tuyến có thể được cuộn không?

Cơ chế đầu vào chính có phải là thiết bị trỏ không và nếu có thì độ chính xác của nó là bao nhiêu?

Phát hiện xem người dùng thích bảng màu sáng hay tối. Đã thêm vào Truy vấn phương tiện cấp 5

Phát hiện nếu người dùng yêu cầu hệ thống tăng hoặc giảm độ tương phản giữa các màu liền kề. Đã thêm vào Truy vấn phương tiện cấp 5

Người dùng thích ít chuyển động hơn trên trang. Đã thêm vào Truy vấn phương tiện cấp 5

Mật độ điểm ảnh của thiết bị đầu ra

Phát hiện xem tập lệnh (i. e. JavaScript) có sẵn. Đã thêm vào Truy vấn phương tiện cấp 5

Tần suất thiết bị đầu ra có thể sửa đổi giao diện của nội dung. Đã thêm vào Truy vấn phương tiện cấp 4

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 Truy vấn phương tiện cấp 5

Chiều rộng của khung nhìn bao gồm cả chiều rộng của thanh cuộn

Các toán tử logic not, @media2, only và @media4 có thể được sử dụng để soạn một truy vấn phương tiện phức tạp. Bạn cũng có thể kết hợp nhiều truy vấn phương tiện vào một quy tắc duy nhất bằng cách tách chúng bằng dấu phẩy

Được sử dụng để kết hợp nhiều tính năng phương tiện với nhau thành một truy vấn phương tiện duy nhất, yêu cầu từng tính năng được xâu chuỗi trả về @media6 để truy vấn là @media6. Nó cũng được sử 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

Được sử dụng để phủ nhận một truy vấn phương tiện, trả về @media6 nếu truy vấn sẽ trả về CSSMediaRule0. Nếu xuất hiện trong danh sách các truy vấn được phân tách bằng dấu phẩy, nó sẽ chỉ phủ định truy vấn cụ thể mà nó được áp dụng. Nếu bạn sử dụng toán tử not, bạn cũng phải chỉ định loại phương tiện

Ghi chú. Ở Cấp độ 3, không thể sử dụng từ khóa not để phủ định một biểu thức tính năng phương tiện riêng lẻ, chỉ toàn bộ truy vấn phương tiện

Chỉ áp dụng một kiểu nếu toàn bộ truy vấn phù hợp. Nó rất hữu ích để ngăn các trình duyệt cũ hơn áp dụng các kiểu đã chọn. Khi không sử dụng only, các trình duyệt cũ hơn sẽ diễn giải truy vấn CSSMediaRule5 thành

@media = 
  @media  {  }  

Dấu phẩy được sử dụng để kết hợp nhiều truy vấn phương tiện vào một quy tắc duy nhất. Mỗi truy vấn trong danh sách được phân tách bằng dấu phẩy được xử lý riêng biệt với các truy vấn khác. Do đó, nếu bất kỳ truy vấn nào trong danh sách là @media6, thì toàn bộ câu lệnh phương tiện sẽ trả về @media6. Nói cách khác, danh sách hoạt động giống như một toán tử logic @media4

Tương đương với toán tử CSSMediaRule8. Đã thêm vào Truy vấn phương tiện cấp 4

Để 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 s khi bạn cần một @media5 cho các truy vấn phương tiện của mình

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

Ngoài ra, hãy cân nhắc sử dụng truy vấn phương tiện cấp 4 để cải thiện trải nghiệm của người dùng. Ví dụ: @media5 để phát hiện xem người dùng có yêu cầu hệ thống giảm thiểu lượng hoạt ảnh hoặc chuyển động mà hệ thống sử dụng hay không

Bởi vì các truy vấn phương tiện cung cấp thông tin chi tiết về các khả năng—và mở rộng ra là 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, nên có khả năng họ có thể bị lạm dụng để tạo "dấu vân tay" xác định thiết bị hoặc ít nhất là

Do khả năng này, một trình duyệt có thể chọn làm giả các giá trị được trả về theo một cách nào đó để ngăn chúng được sử dụng để xác định chính xác một máy tính. Một 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;

@media = 
  @media  {  }  

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Được giới thiệu trong Truy vấn phương tiện Cấp 4 là một cú pháp phạm vi mới cho phép các truy vấn phương tiện í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