Thiết kế responsive với CSS để trình duyệt làm việc

Thiết kế responsive với CSS hiệu quả không phải là kiểm soát từng pixel ở mọi kích thước. Đó là cách đặt ra các giới hạn hợp lý, rồi để trình duyệt tính toán phần còn lại dựa trên không gian thực tế mà thành phần đang có.

Website đã có tính responsive trước khi bạn viết CSS

Một trang HTML đơn thuần thường tự xếp nội dung theo chiều dọc. Khi chiều rộng màn hình giảm, văn bản tự xuống dòng và chiều cao của khối nội dung tăng lên. Đó đã là một hành vi responsive cơ bản.

Thành phần dễ gây lỗi phổ biến nhất là hình ảnh. Một ảnh có kích thước gốc lớn có thể tràn ngang ra ngoài vùng hiển thị, kéo theo thanh cuộn ngang và làm toàn bộ trang trông như bị vỡ. Thiết lập cơ bản dưới đây giúp ảnh co theo phần tử chứa:

img {
display: block;
max-width: 100%;
}

Nếu dự án dùng ảnh SVG lớn hoặc phần tử picture, bạn có thể cần mở rộng bộ chọn. Tuy vậy, nguyên tắc vẫn không đổi: nội dung trực quan không nên được phép rộng hơn vùng chứa nó.

Khi gặp vấn đề responsive, hãy xem lại CSS đã thêm trước khi trách trình duyệt. Phần lớn lỗi tràn nội dung xuất phát từ một khai báo kích thước hoặc vị trí đã vô tình khóa khả năng thích nghi tự nhiên của bố cục.

Ưu tiên giới hạn mềm thay vì kích thước cố định

Khi màn hình hẹp lại, cùng một lượng nội dung cần nhiều chiều cao hơn vì chữ sẽ xuống dòng. Nếu bạn áp dụng height cố định cho một phần như phần đầu trang, nội dung có thể tràn xuống dưới và bị che bởi khu vực tiếp theo.

Thay vì bắt một khối luôn cao đúng một con số, hãy dùng min-height khi bạn cần đảm bảo chiều cao tối thiểu. Khối vẫn có thể cao hơn nếu nội dung cần thêm không gian.

header {
min-height: 600px;
}

Với chiều rộng, tư duy thường đi theo hướng ngược lại. Một vùng chứa nội dung cần có giới hạn trên để dòng chữ không quá dài trên màn hình lớn, nhưng vẫn phải co được ở màn hình nhỏ.

.wrapper {
max-width: 960px;
margin-inline: auto;
}

margin-inline: auto là cách viết theo thuộc tính logic để căn giữa theo trục ngang trong phần lớn giao diện thông thường. Quan trọng hơn, max-width cho phép phần tử rộng đến giới hạn mong muốn nhưng không buộc nó luôn rộng bằng con số đó.

Có những ngoại lệ hợp lý. Ảnh đại diện, biểu tượng và các thành phần nhỏ có kích thước xác định thường có thể dùng width cố định. Nhưng với những khối tham gia vào bố cục chính của trang, hãy bắt đầu bằng max-width cho chiều rộng và min-height cho chiều cao.

Đừng khai báo điều mà trình duyệt đã tự làm

Một lỗi thường gặp là đặt width: 100vw cho body. Trên một số môi trường, đơn vị vw tính cả phần không gian dưới thanh cuộn dọc. Điều này có thể tạo thanh cuộn ngang dù nội dung không hề cần nó.

Phần tử khối vốn đã chiếm toàn bộ chiều rộng khả dụng theo mặc định. Vì vậy, trong đa số trường hợp, bạn không cần đặt width: 100%, càng không cần width: 100vw, chỉ để nó đầy chiều ngang.

Giá trị mặc định auto thường linh hoạt hơn 100%. Chỉ thêm một khai báo khi giao diện hiện tại chưa đáp ứng được mục tiêu thực tế của bạn. Nếu một thuộc tính không thay đổi được hành vi cần thiết, nó chỉ tạo thêm bề mặt cho lỗi phát sinh sau này.

Dùng đơn vị viewport có chọn lọc

Đơn vị viewport như vw và vh nghe có vẻ là lời giải mặc định cho giao diện responsive, nhưng chúng không tự động làm bố cục linh hoạt. Dùng chúng để ép chiều rộng hoặc chiều cao thường tạo ra các trường hợp khó lường.

Một trường hợp hợp lý là phần mở đầu cần chiếm phần lớn chiều cao cửa sổ. Ngay cả khi đó, min-height vẫn an toàn hơn height vì nội dung được phép dài thêm trên màn hình hẹp hoặc khi thiết bị xoay ngang.

.hero {
min-height: 80vh;
}

Bạn cũng có thể dùng đơn vị viewport trong clamp() để khoảng đệm tăng giảm trong một biên độ kiểm soát được. Tuy nhiên, đừng xem viewport là giải pháp đầu tiên cho mọi vấn đề kích thước. Hãy thử các hành vi mặc định, max-width, min-height, Flexbox và Grid trước.

Để Flexbox và Grid tự xử lý không gian

Tư duy quan trọng nhất là chuyển từ việc ra lệnh tuyệt đối sang việc đưa chỉ dẫn. Thay vì nói chính xác bố cục phải như thế nào ở từng chiều rộng, hãy nói điều gì là quan trọng và cho phép trình duyệt chọn cách sắp xếp phù hợp.

Cho các nhãn tự xuống dòng với Flexbox

Một nhóm nhãn, nút lọc hoặc liên kết phụ có thể nằm cạnh nhau khi còn chỗ. Khi hết chỗ, chúng nên tự xuống hàng thay vì tràn ra ngoài. Bạn không cần media query chỉ để xử lý tình huống này.

.tags {
display: flex;
flex-wrap: wrap;
gap: 1rem 3rem;
}

flex-wrap: wrap cho trình duyệt một chỉ dẫn rất rõ: đặt các phần tử cạnh nhau nếu có thể, còn nếu không thì chuyển chúng xuống hàng tiếp theo. Khoảng cách ngang và dọc cũng có thể tách riêng qua gap.

Tạo lưới sản phẩm bằng Grid nội tại

Với danh sách sản phẩm, thư viện ảnh hoặc thẻ nội dung, CSS Grid thường phù hợp hơn Flexbox. Thay vì cố định hai hoặc ba cột rồi viết nhiều điểm ngắt, bạn có thể nói rằng mỗi thẻ cần tối thiểu một độ rộng nhất định.

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}

auto-fit kết hợp với minmax(250px, 1fr) cho phép trình duyệt tự tính số cột có thể chứa được. Khi đủ chỗ cho hai thẻ rộng ít nhất 250 pixel, lưới có hai cột. Khi đủ cho ba thẻ, lưới có ba cột. Khi không đủ, các thẻ quay về một cột mà không cần bạn đoán trước điểm chuyển đổi.

Cách tiếp cận này thường dễ bảo trì hơn nhiều so với việc đặt cùng một phần tử ở sáu chiều rộng khác nhau trong sáu media query. Nó cũng hoạt động tốt khi thành phần được đặt trong các vùng chứa khác nhau, không chỉ khi toàn bộ viewport thay đổi.

Media query vẫn cần thiết, nhưng chỉ khi bố cục thực sự đổi trạng thái

Không phải mọi media query đều xấu. Chúng hữu ích khi giao diện cần một thay đổi có chủ đích, chẳng hạn chuyển khu vực nội dung và thanh bên từ xếp dọc sang hai cột.

.with-sidebar {
display: grid;
gap: 1rem;
}
@media (min-width: 760px) {
.with-sidebar {
grid-template-columns: 300px 1fr;
}
}

Cách này bắt đầu từ trạng thái đơn giản nhất: một cột, nội dung xếp chồng. Khi đủ không gian, bạn mới thêm độ phức tạp bằng hai cột. Bạn không cần tạo hai cột trước rồi dùng media query để gỡ chúng ra ở màn hình nhỏ.

Điểm ngắt không nhất thiết phải theo một danh sách thiết bị cố định. Hãy chọn nó ở thời điểm bố cục bắt đầu chật, nội dung bị ép quá mức hoặc hai cột không còn mang lại trải nghiệm tốt. Nói cách khác, breakpoint nên do nội dung quyết định.

Những sai lầm làm CSS responsive trở nên khó chịu

• Khóa chiều cao cho các khối chứa nội dung. Nội dung thay đổi theo chiều rộng, nên chiều cao cần được phép tăng khi cần.
• Đặt chiều rộng cố định cho bố cục chính. Điều này dễ tạo tràn ngang và buộc bạn phải sửa bằng nhiều media query.
• Dùng 100vw cho phần tử đã tự rộng đầy vùng chứa. Đây là nguyên nhân phổ biến của thanh cuộn ngang không mong muốn.
• Cho rằng viewport unit luôn đồng nghĩa với responsive. Đơn vị linh hoạt không tự tạo ra một bố cục linh hoạt.
• Chọn breakpoint theo tên thiết bị. Một thành phần nên thay đổi khi chính nó hết không gian, không phải chỉ vì màn hình có một tên gọi nào đó.
• Theo đuổi từng pixel tuyệt đối. Một thiết kế thích nghi tốt, dễ bảo trì thường giá trị hơn một thiết kế khớp tuyệt đối ở vài kích thước mẫu.

FAQ

Có nên dùng media query cho mọi phần responsive không?

Không nên. Flexbox với flex-wrap và Grid với auto-fit, minmax() có thể xử lý nhiều tình huống tự nhiên hơn. Media query phù hợp khi giao diện cần chuyển sang một cấu trúc khác có chủ đích.

Khi nào nên dùng width cố định?

Bạn có thể dùng cho các thành phần nhỏ như biểu tượng, ảnh đại diện hoặc đối tượng có kích thước thật sự cố định. Với vùng bố cục lớn, hãy ưu tiên max-width để vẫn giữ khả năng co giãn.

Vì sao min-height an toàn hơn height trong bố cục?

min-height đặt chiều cao tối thiểu nhưng vẫn cho phép khối lớn lên khi nội dung xuống dòng. height cố định có thể làm nội dung tràn hoặc bị che ở không gian hẹp.

Nếu bạn cần biến các nguyên tắc CSS responsive này thành một website ổn định, dễ mở rộng và nhất quán trên nhiều thiết bị, dịch vụ [thiết kế website chuyên nghiệp](https://mintstack.vn) của MintStack có thể hỗ trợ bạn xây dựng nền tảng phù hợp.