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