Thiết kế web đáp ứng - Chế độ xem lưới
Grid-View là gì?
Nhiều trang web dựa trên chế độ xem lưới, có nghĩa là trang được chia thành các cột:
Sử dụng chế độ xem lưới rất hữu ích khi thiết kế các trang web. Nó giúp bạn đặt các phần tử trên trang dễ dàng hơn.
Chế độ xem lưới đáp ứng thường có 12 cột và có tổng chiều rộng là 100% và sẽ thu nhỏ và mở rộng khi bạn thay đổi kích thước cửa sổ trình duyệt.
Ví dụ: Chế độ xem lưới đáp ứng
Xây dựng chế độ xem lưới đáp ứng
Hãy bắt đầu xây dựng chế độ xem lưới đáp ứng.
Trước tiên, hãy đảm bảo rằng tất cả các phần tử HTML đều có thuộc box-sizingtính được đặt thành
border-box. Điều này đảm bảo rằng phần đệm và đường viền được bao gồm trong tổng chiều rộng và chiều cao của các phần tử.
Thêm mã sau vào CSS của bạn:
* {
box-sizing: border-box;
}
Đọc thêm về thuộc box-sizingtính trong chương Định cỡ hộp CSS của chúng tôi.
Ví dụ sau đây cho thấy một trang web đáp ứng đơn giản, có hai cột:
Thí dụ
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Ví dụ trên là tốt nếu trang web chỉ chứa hai cột.
Tuy nhiên, chúng tôi muốn sử dụng chế độ xem lưới đáp ứng với 12 cột, để có nhiều quyền kiểm soát hơn đối với trang web.
Đầu tiên chúng ta phải tính tỷ lệ phần trăm cho một cột: 100% / 12 cột = 8,33%.
Sau đó, chúng tôi tạo một lớp cho mỗi cột trong số 12 cột class="col-"và một số xác định có bao nhiêu cột mà phần sẽ kéo dài:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Tất cả các cột này phải nổi ở bên trái và có phần đệm 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Mỗi hàng nên được bao bọc trong một <div>. Số cột bên trong một hàng phải luôn thêm tối đa 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Các cột bên trong một hàng đều nổi ở bên trái và do đó được đưa ra khỏi luồng của trang và các phần tử khác sẽ được đặt như thể các cột đó không tồn tại. Để ngăn chặn điều này, chúng tôi sẽ thêm một kiểu xóa luồng:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Chúng tôi cũng muốn thêm một số kiểu và màu sắc để làm cho nó trông đẹp hơn:
Thí dụ
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Lưu ý rằng trang web trong ví dụ này trông không đẹp khi bạn thay đổi kích thước cửa sổ trình duyệt thành chiều rộng rất nhỏ. Trong chương tiếp theo, bạn sẽ học cách khắc phục điều đó.