LÀM THẾ NÀO ĐỂ - Các điểm ngắt thiết bị điển hình
Tìm hiểu cách sử dụng truy vấn phương tiện cho các điểm ngắt thiết bị phổ biến.
Điểm ngắt thiết bị điển hình
Có rất nhiều màn hình và thiết bị với chiều cao và chiều rộng khác nhau, vì vậy thật khó để tạo ra một điểm dừng chính xác cho từng thiết bị. Để giữ mọi thứ đơn giản, bạn có thể nhắm mục tiêu năm nhóm phổ biến:
Thí dụ
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Các trang liên quan
Hướng dẫn CSS: Truy vấn Phương tiện CSS
Hướng dẫn CSS: Ví dụ về Truy vấn Phương tiện CSS
Tham khảo CSS: Quy tắc @media
Hướng dẫn về RWD: Thiết kế web đáp ứng với truy vấn phương tiện
Hướng dẫn JavaScript: Phương thức window.matchMedia ()