Cách thực hiện - Điểm dừng 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 dừng thiết bị phổ biến.
Điểm dừng thiết bị điển hình
Có rất nhiều màn hình và thiết bị có chiều cao và chiều rộng khác nhau nên rất khó để tạo điểm dừng chính xác cho từng thiết bị. Để đơn giản hóa mọi việc, bạn có thể nhắm mục tiêu vào năm nhóm phổ biến:
Ví 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) {...}
Hãy tự mình thử »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ề CSS Media Queries
Tham khảo CSS: Quy tắc @media
Hướng dẫn 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()