Cách tạo: Điểm ngắt thiết bị典型

Học cách sử dụng truy vấn truyền thông cho các điểm ngắt thiết bị phổ biến.

Điểm ngắt thiết bị典型

Có rất nhiều màn hình và thiết bị với độ cao và độ rộng khác nhau, vì vậy việc tạo điểm ngắt chính xác cho mỗi thiết bị là khó khăn.

Để đơn giản hóa thao tác, bạn có thể định vị năm nhóm phổ biến:

Mẫu

/* Các thiết bị siêu nhỏ (điện thoại, 600px và nhỏ hơn) */
@media only screen and (max-width: 600px) {...}
/* Các thiết bị nhỏ (máy tính bảng dọc và điện thoại lớn, 600px và lớn hơn) */
@media only screen and (min-width: 600px) {...}
/* Các thiết bị trung (máy tính bảng ngang, 768px và lớn hơn) */
@media only screen and (min-width: 768px) {...}
/* Các thiết bị lớn (máy tính xách tay và máy tính để bàn, 992px và lớn hơn) */
@media only screen and (min-width: 992px) {...}
/* Các thiết bị lớn (máy tính xách tay và máy tính để bàn, 1200px và lớn hơn) */
@media only screen and (min-width: 1200px) {...}

Thử ngay

Các trang liên quan

Hướng dẫn:Truy vấn CSS

Hướng dẫn:Mẫu ví dụ về truy vấn truyền thông CSS

Hướng dẫn tham khảo:Điều khoản @media CSS

Hướng dẫn:Thực hiện thiết kế Web tương ứng với màn hình thông qua truy vấn truyền thông

Hướng dẫn tham khảo:Phương thức JavaScript window.matchMedia()