Bố cục macro mô tả cách tổ chức giao diện lớn hơn trên toàn trang.
Trước khi áp dụng bất kỳ bố cục nào, bạn cần đảm bảo mạch nội dung có ý nghĩa. Thứ tự mặc định của một cột này là thứ tự mà các màn hình nhỏ hơn sẽ nhận được.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Khi bạn sắp xếp các thành phần cấp trang riêng lẻ này, bạn đang thiết kế bố cục macro: chế độ xem cấp cao của trang. Khi sử dụng truy vấn phương tiện, bạn có thể cung cấp các quy tắc trong CSS mô tả cách chế độ xem này sẽ điều chỉnh theo các kích thước màn hình khác nhau.
Lưới
Lưới CSS là một công cụ rất hiệu quả để áp dụng bố cục cho trang của bạn. Trong ví dụ trên, giả sử bạn muốn bố cục hai cột khi có đủ chiều rộng màn hình. Để áp dụng bố cục hai cột này khi trình duyệt đủ rộng, sử dụng truy vấn phương tiện để xác định kiểu lưới phía trên một điểm ngắt đã chỉ định.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Hộp linh hoạt
Đối với bố cục cụ thể này, bạn cũng có thể sử dụng flexbox. Các kiểu sẽ có dạng như sau:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Tuy nhiên, phiên bản hộp linh hoạt yêu cầu nhiều CSS hơn. Mỗi cột có một quy tắc riêng để mô tả lượng không gian cần dùng. Trong ví dụ về lưới, chính thông tin đó được đóng gói trong một quy tắc cho phần tử chứa.
Bạn có cần truy vấn về nội dung nghe nhìn không?
Không phải lúc nào bạn cũng cần sử dụng truy vấn nội dung nghe nhìn. Truy vấn phương tiện hoạt động tốt khi bạn áp dụng các thay đổi cho một vài phần tử, nhưng nếu cần cập nhật bố cục nhiều, các truy vấn đa phương tiện của bạn có thể không phù hợp với nhiều điểm ngắt.
Giả sử bạn có một trang có đầy đủ các thành phần thẻ.
Thẻ không bao giờ rộng hơn 15em và bạn nên đặt bao nhiêu thẻ tuỳ ý vào một dòng.
Bạn có thể ghi các truy vấn nội dung nghe nhìn có điểm ngắt 30em, 45em, 60em,
và cứ tiếp tục như thế nhưng việc đó khá tẻ nhạt và khó duy trì.
Thay vào đó, bạn có thể áp dụng các quy tắc để thẻ tự động chiếm đúng khoảng không gian.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Bạn có thể có được một bố cục tương tự bằng hộp linh hoạt. Trong trường hợp này, nếu không có đủ thẻ để điền vào hàng cuối cùng, các thẻ còn lại sẽ kéo giãn để lấp đầy không gian có sẵn thay vì xếp thành hàng. Nếu bạn muốn căn chỉnh hàng và cột, hãy sử dụng lưới.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Bằng cách áp dụng một số quy tắc thông minh trong hộp linh hoạt hoặc lưới, bạn có thể thiết kế bố cục macro động với CSS tối thiểu mà không cần bất kỳ truy vấn phương tiện nào. Điều đó sẽ ít tốn công sức hơn cho bạn—thay vào đó, bạn đang khiến trình duyệt thực hiện các phép tính. Để xem một số ví dụ về bố cục CSS hiện đại linh hoạt mà không yêu cầu truy vấn phương tiện, hãy xem 1linelayouts.com.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về bố cục macro.
Câu nào mô tả đúng nhất về bố cục macro?
Bố cục macro luôn sử dụng các truy vấn phương tiện để thích ứng với nhiều kích thước màn hình?
Giờ bạn đã có một số ý tưởng về bố cục macro cấp trang, chuyển sự chú ý đến các thành phần trên trang. Đây là lĩnh vực của bố cục vi mô.