Trang chủ
CSS
Ví dụ CSS MQ
Dùng thử: Ví dụ về sử dụng truy vấn phương tiện
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,initial-scale=1"> <style> * { box-sizing: border-box; } /* Tạo bốn cột bằng nhau nổi cạnh nhau */ .column { float: left; chiều rộng: 25%; phần đệm: 20px; } /* Xóa phần nổi sau các cột */ .row:after { content: ""; hiển thị: bảng; rõ ràng: cả hai; } /* Trên màn hình rộng 992px trở xuống, chuyển từ bốn cột thành hai cột */ @media screen và (max-width: 992px) { .column { width: 50%; } } /* Trên màn hình rộng 600px trở xuống, đặt các cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen and (max-width: 600px) { .column { width: 100%; } } </style> </head> <body> <h2>Bố cục bốn cột đáp ứng</h2> <p><strong>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi.</strong> Trên màn hình rộng 992px hoặc ít hơn, các cột sẽ thay đổi kích thước từ bốn cột thành hai cột. Trên màn hình có chiều rộng từ 600px trở xuống, các cột sẽ xếp chồng lên nhau thay vì cạnh nhau.</p> <div class="row"> <div class="column" style="background-color: #aaa;"> <h2>Cột 1</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#bbb;"> <h2 >Cột 2</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Cột 3</h2> <p>Một số văn bản..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Cột 4</h2> <p>Một số văn bản.. </p> </div> </div> </body> </html>