Thiết kế web đáp ứng - Chế độ xem lưới
Chế độ xem lưới là gì?
Nhiều trang web dựa trên chế độ xem dạng lưới, có nghĩa là trang được chia thành các cột:
Sử dụng chế độ xem dạng lưới rất hữu ích khi thiết kế trang web. Nó làm cho việc đặt các phần tử trên trang trở nên 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%, đồng thời 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 thành phần HTML đều có thuộc tính box-sizing đượ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 tính box-sizing 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 phản hồi đơn giản, có hai cột:
Ví dụ trên là ổn 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 số lượng cột mà phần này sẽ trải 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%;} Hãy tự mình thử »Tất cả các cột này phải nổi ở bên trái và có phần đệm là 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Mỗi hàng phải được gói trong một <div> . Tổng số cột bên trong một hàng phải luôn bằng 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 về bên trái và do đó bị đư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 làm rõ 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 dáng và màu sắc để nó trông đẹp hơn:
Ví 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;
} Hãy tự mình thử »Lưu ý rằng trang web trong ví dụ 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 đó.
