Trang chủ
CSS
Truy vấn phương tiện RWD
Dùng thử: Điểm dừng truy vấn phương tiện điển hình
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,init-scale=1.0"> <style> .example { đệm: 20px; màu trắng; } /* Thiết bị cực nhỏ (điện thoại, 600px trở xuống) */ @media only screen and (max-width: 600px) { .example {background: red;} } /* Thiết bị nhỏ (máy tính bảng dọc và điện thoại lớn, 600px và up) */ @media only screen và (min-width: 600px) { .example {background: green;} } /* Thiết bị trung bình (máy tính bảng nằm ngang, 768px trở lên) */ @media only screen và (min-width: 768px) { .example {background: blue;} } /* Thiết bị lớn (máy tính xách tay/máy tính để bàn, 992px trở lên) */ @media chỉ có màn hình và (min-width: 992px) { .example {background: orange;} } / * Các thiết bị cực lớn (máy tính xách tay và máy tính để bàn lớn, 1200px trở lên) */ Màn hình chỉ @media và (min-width: 1200px) { .example {background: pink;} } </style> </head> <body> < h2>Điểm dừng truy vấn phương tiện điển hình</h2> <p class="example">Thay đổi kích thước cửa sổ trình duyệt để xem màu nền của đoạn này thay đổi như thế nào trên các kích thước màn hình khác nhau.</p> </body> </html>