Vấn đề với tỷ lệ phần trăm trong CSS
Cách đây không lâu, chúng tôi hoàn toàn phụ thuộc vào việc sử dụng tỷ lệ phần trăm cho chiều rộng và chiều cao. Sử dụng tỷ lệ phần trăm có nghĩa là bố cục và các phần tử của bạn có thể có chiều cao và chiều rộng dựa trên chế độ xem. Nhưng khi CSS hiện đại tiếp tục phát triển, chúng ta đã đạt đến điểm mà thậm chí có thể nên tránh sử dụng tỷ lệ phần trăm.
Tìm hiểu về các vấn đề phổ biến mà bạn sẽ gặp phải khi sử dụng tỷ lệ phần trăm. Ngoài ra, hãy tìm hiểu về các kỹ thuật CSS hiện đại để sử dụng thay cho tỷ lệ phần trăm. Những kỹ thuật này sẽ cung cấp cho bạn kết quả tương tự như tỷ lệ phần trăm mà không có bất kỳ nhược điểm nào.
Mục Lục
Một ví dụ lưới rất đơn giản
Để chứng minh sự cố với đơn vị phần trăm, hãy xem xét bố cục HTML này:
<div class="container my-grid">
<div class="grid-item">
</div>
<div class="grid-item">
</div>
</div>
Yếu tố bên ngoài là một yếu tố cơ bản div phần tử container có hai div những đứa trẻ. Mỗi đứa trẻ có một mục lưới lớp học. Để biến vùng chứa thành lưới có hai cột (hai hộp), chúng ta cần áp dụng mã CSS sau:
body {
background-color: black;
align-items: center;
justify-content: flex-start;
}.my-grid {
display: grid;
grid-template-columns: 50% 50%;
margin: 3rem;
border: 2px solid gold;
padding: 1rem;
}
.grid-item {
border: 3px solid gold;
padding: 10rem 0;
background: blue;
}
Vì vậy, mỗi cột (mục lưới) có màu nền vàng. Trên lớp cha của vùng chứa, chúng tôi đặt lưới-mẫu-cột đến 50% cho mỗi cột. Do đó, cả hai hộp chiếm 50% tổng chiều rộng của phần tử vùng chứa.
Đây là kết quả:
Nhưng có vấn đề với sự liên kết này. Đầu tiên, nếu bạn quyết định thêm một khoảng cách đối với lưới cha, phần tử con có thể tràn ra ngoài. Ví dụ: nếu bạn đã thêm khoảng cách: 3px đến .my-lưới khối trong CSS, thì đây là giao diện của bố cục:
Như bạn có thể thấy trong hình trên, hộp bên phải đã di chuyển ra khỏi vùng chứa. Đôi khi bạn có thể không nhận thấy điều đó vì khoảng cách của bạn đủ nhỏ, dẫn đến sự cố căn chỉnh kỳ lạ. Nhưng nếu bạn có khoảng cách lớn hơn, thì sự trùng lặp trở nên khá rõ ràng.
Bất cứ khi nào bạn đang sử dụng tỷ lệ phần trăm và thêm lề hoặc khoảng cách, sẽ có rất nhiều khả năng gặp phải các loại lỗi này. Nhưng tại sao lại xảy ra lỗi?
Đó là bởi vì mỗi cột là 50% của cha mẹ. Trong ví dụ trên, chúng ta có 50% cộng với 50% cộng với khoảng cách đó (3px), sẽ đẩy hộp ra khỏi thùng chứa.
Lưu ý rằng lỗi này không chỉ xảy ra với 50-50. Bạn có thể đặt cột đầu tiên thành 75%, cột thứ hai thành 25% và lỗi vẫn xảy ra. Đây là lý do tại sao bạn cần sử dụng giải pháp sau thường xuyên hơn.
Giải pháp với các giá trị phân số
Giải pháp là sử dụng các giá trị phân số thay vì tỷ lệ phần trăm. Vì vậy, thay vì đặt cột đầu tiên thành 75% và cột thứ hai thành 50%, bạn có thể đặt cột đầu tiên thành 3fr và cột thứ hai thành 1fr:
grid-template-columns: 3fr 1fr
Điều này duy trì tỷ lệ giống như ví dụ đầu tiên. Nhưng lợi thế của việc sử dụng bạn thân đơn vị là họ đang sử dụng một phần không gian có sẵn. Trong trường hợp này, cột đầu tiên sẽ chiếm ba phần không gian trong khi cột thứ hai sẽ chiếm một phần, không bao gồm khoảng trống.
Một ưu điểm khác của việc sử dụng frs thay vì tỷ lệ phần trăm—hoặc các đơn vị tuyệt đối khác, như px hoặc em—là bạn có thể kết hợp chúng với các giá trị cố định. Đây là một ví dụ:
grid-template-columns: 1fr 10rem;
Với mã ở trên, bạn sẽ nhận được một giá trị cố định không bao giờ thay đổi bất kể kích thước màn hình. Điều này là do cột bên phải sẽ luôn duy trì ở mức 10rem trong khi cột bên trái sẽ chiếm không gian còn lại (đã trừ đi khoảng cách).
Đôi khi bạn có thể thoát khỏi việc sử dụng tỷ lệ phần trăm. Nhưng bạn phải sử dụng chúng theo những cách thông minh mà vẫn có thể thích ứng với hoàn cảnh. Thông thường, điều này có nghĩa là ghép nối chúng với một bạn thân giá trị.
Một ví dụ thực tế hơn
Hãy tưởng tượng rằng bạn có một trang bao gồm khu vực nội dung chính và một trang phụ (dành cho các bài viết liên quan). Khu vực nội dung chính chiếm ba phần của màn hình trong khi phần bên cạnh chiếm không gian còn lại trừ đi khoảng trống:
.container {
width: 100%;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 1.5rem;
}.card {
background-color: #5A5A5A;
padding: 10px;
margin-bottom: .5rem;
}
Đây là kết quả:
Thông thường, bạn sẽ di chuyển thanh bên (hoặc sang một bên) xuống dưới cùng (hoặc trên cùng) của trang sau khi màn hình trở nên quá hẹp. Điều này có nghĩa là thiết lập các truy vấn phương tiện xếp chồng mọi thứ lên nhau khi chế độ xem đạt đến một điểm dừng nhất định.
Đây là cách bạn có thể xếp mọi thứ vào một cột khi khung nhìn đạt 55em trở xuống:
@media(max-width: 55em) {
.container {
display: flex;
flex-direction: column;
}
}
Và kết quả sẽ giống như thế này:
Bây giờ bạn không muốn mỗi thẻ mở rộng chiều rộng của toàn bộ chế độ xem. Thay vào đó, các thẻ sẽ hiển thị cạnh nhau. Cách tốt nhất để đạt được điều này là sử dụng lưới CSS. Nhưng thay vì đặt các giá trị chiều rộng cố định (chẳng hạn như 50%) cho cột-mẫu-lưới, hãy sử dụng lặp lại() chức năng như sau:
.sidebar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
align-content: start;
gap: 2rem;
}
CSS này đặt kích thước tối thiểu là 25rem và kích thước tối đa là 1fr. Cách tiếp cận đó tốt hơn nhiều so với việc đặt chiều rộng cố định vì nó dựa vào kích thước nội tại. Nói cách khác, nó cho phép trình duyệt tìm ra mọi thứ dựa trên các tham số có sẵn.
Giờ đây, khi bạn giảm cửa sổ trình duyệt xuống một chiều rộng cụ thể, hộp lưới sẽ tự động điều chỉnh thành hai hộp trên mỗi dòng.
Khi màn hình trở nên nhỏ hơn, nó sẽ giảm xuống một hộp trên mỗi dòng. Vì vậy, trình duyệt xếp chồng mọi thứ lên nhau. Tất cả điều này xảy ra khi bạn thay đổi kích thước cửa sổ. Bạn có thể sử dụng một tính năng của trình duyệt như Chrome DevTools để hiểu cách CSS này hoạt động và cách thay đổi kích thước cửa sổ sẽ thay đổi bố cục.
Phần tốt nhất là bạn không cần truy vấn bộ chứa hoặc bất kỳ thứ gì lạ mắt để làm cho phần tử phản hồi nhanh. Đơn giản chỉ cần thiết lập một lưới và sử dụng nhỏ nhất lớn nhất() để đặt giá trị phân số thay vì kích thước cố định.
Tìm hiểu thêm về lưới CSS
Nếu bạn muốn giỏi CSS, bạn cần có kiến thức sâu về CSS Grids. Lưới có thể khá mạnh khi được sử dụng tốt. Bạn có thể đạt được hầu hết mọi bố cục bạn muốn bằng Grids. Điều này làm cho nó trở thành một công cụ không thể thiếu trong CSS.
Một điều cần lưu ý khi sử dụng lưới CSS là tập trung vào khả năng phản hồi. Bạn cũng có thể sử dụng phương pháp phân số để tránh các trường hợp xung đột giữa các phần tử. Hãy nhớ nắm vững các lưới CSS vì kiểu bố cục sẽ giúp bạn rất nhiều khi tạo trang web.