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> <style> * { box-sizing: border-box; } nội dung { lề: 0; Họ phông chữ: Arial; } .header { text-align: center; phần đệm: 32px; } .row { hiển thị: flex; flex-wrap: bọc; phần đệm: 0 4px; } /* Tạo bốn cột bằng nhau nằm cạnh nhau */ .column { flex: 25%; chiều rộng tối đa: 25%; phần đệm: 0 4px; } .column img { lề trên: 8px; căn dọc: giữa; } /* Bố cục đáp ứng - tạo bố cục hai cột thay vì bốn cột */ @media screen và (max-width: 800px) { .column { flex: 50%; chiều rộng tối đa: 50%; } } /* Bố cục đáp ứng - làm cho hai cột xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 600px) { .column { flex: 100%; chiều rộng tối đa: 100%; } } </style> <body> <!-- Header --> <div class="header"> <h1>Lưới hình ảnh phản hồi</h1> <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi.</ p> </div> <!-- Lưới ảnh --> <div class="row"> <div class="column"> <img src="/w3images/wedding.jpg" style="width:100% "> <img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/falls2.jpg" style="width:100%"> <img src="/ w3images/paris.jpg" style="width:100%"> <img src="/w3images/nature.jpg" style="width:100%"> <img src="/w3images/mist.jpg" style= "width:100%"> <img src="/w3images/paris.jpg" style="width:100%"> </div> <div class="column"> <img src="/w3images/underwater. jpg" style="width:100%"> <img src="/w3images/ocean.jpg" style="width:100%"> <img src="/w3images/wedding.jpg" style="width:100 %"> <img src="/w3images/mountainskies.jpg" style="width:100%"> <img src="/w3images/rocks.jpg" style="width:100%"> <img src=" /w3images/underwater.jpg" style="width:100%"> </div> <div class="column"> <img src="/w3images/wedding.jpg" style="width:100%"> < img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/falls2.jpg" style="width:100%"> <img src="/w3images/paris .jpg" style="width:100%"> <img src="/w3images/nature.jpg" style="width:100%"> <img src="/w3images/mist.jpg" style="width: 100%"> <img src="/w3images/paris.jpg" style="width:100%"> </div> <div class="column"> <img src="/w3images/underwater.jpg" kiểu ="width:100%"> <img src="/w3images/ocean.jpg" style="width:100%"> <img src="/w3images/wedding.jpg" style="width:100%"> <img src="/w3images/mountainskies.jpg" style="width:100%"> <img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/ dưới nước.jpg" style="width:100%"> </div> </div> </body> </html>