Mẹo giúp bạn tạo bố cục đáp ứng dễ dàng

Bạn đang tìm cách tạo bố cục đáp ứng phù hợp với trang web. Vậy thì mời bạn tham khảo những mẹo đơn giản dưới đây. Chúng có thể khiến quá trình tạo bố cục đáp ứng của bạn trở nên dễ dàng hơn.

Bắt đầu với Style Sheet cơ bản

Luôn bắt đầu với kiểu cơ bản khi viết CSS. Đừng lo về bố cục. Thay vào đó, chọn những kiểu chung như typography, colors, và backgrounds. Thiết lập lại maring, loại bỏ các đường gạch chân trên link và nhiều hơn thế nữa.

Sau khi hoàn tất việc tạo kiểu chung, bạn có thể tạo bố cục và nhắm tới từng phần tử đơn lẻ trong bố cục. Về cơ bản, hãy bắt đầu từ trên xuống dưới, rồi di chuyển trong các thành phần.

Ví dụ bên dưới reset margin trên tất cả phần tử sang 0, xác định typograhy, màu sắc của tất cả heading chính và thêm margin nhất quán cho tất cả.

body,
h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  color: blue;
  font-family: "Verdana" sans-serif;
  font-weight: 900;
  line-height: 1;
}

h2,
h3,
p {
  margin-bottom: 1rem;
}

Đây là một kiểu bố cục đáp ứng vì khi bạn thay đổi kích thước của nó, kích thước của các phần tử cũng thay đổi theo.

Tránh các kích thước cố định

Khi bắt đầu nghĩ về các bố cục, điều đầu tiên bạn cần nhớ là tránh kích thước cố định, chẳng hạn như width: 1000px, height: 200px,… Đặt chiều cao và rộng cố định sẽ chỉ gây ra vẫn đề khi phải chỉnh sửa.

Thay vào đó, hãy dùng chiều cao & rộng linh hoạt. Ví dụ, dùng min-height và min-width thay cho height và width.

Xét code mẫu sau:

Giả sử bạn đặt chiều rộng của một phần tử là 600px. Khi kích thước nhỏ hơn 600px, nội dung sẽ bị tràn:

Thay vào đó, bạn nên thay đổi thuộc tính từ width thành max-width. Với max-width, phần tử được phép thu hẹp khi cửa sổ trình duyệt thu nhỏ và ngược lại.

Nhớ rằng web mặc định là đáp ứng

Hãy nhớ rằng trang web của bạn đáp ứng ngay cả trước khi bạn viết một dòng mã CSS. Tư duy này có thể giúp bạn tránh phức tạp hóa quá trình thiết kế. Bố cục sẽ hoạt động trên màn hình lớn và màn hình nhỏ. Nó có thể không đẹp. Nó thậm chí có thể khó đọc trên màn hình lớn. Nhưng kiểu trang web thích ứng với gần như mọi chế độ xem.

Dùng các truy vấn media để thêm sự phức tạp

Cố gắng chỉ sử dụng các truy vấn media khi cần tăng thêm độ phức tạp, chẳng hạn như bạn muốn có 3 cột trên màn hình lớn. Nếu không, đừng sử dụng chúng nếu muốn có bố cục web đơn giản và dễ nhìn.

Sử dụng CSS hiện đại

Bằng cách sử dụng các phương pháp tiếp cận CSS hiện đại, bạn có thể thoát khỏi hầu hết các vấn đề về căn chỉnh và điểm ngắt và tiến tới đạt được thiết kế bố cục đáp ứng nhanh chóng.

Ví dụ:

h1 { font-size: clamp(3rem, 1rem + 10vw, 7rem)}

Thẻ h1 chứa kích thước phông chữ tối thiểu và tối đa. Kích thước nhỏ nhất muốn đạt được ở đây là 3rem và cao nhất là 7rem. Phần giữa là những gì lặp lại (1rem + 10 vw). Do đó, tiêu đề sẽ tự động thu nhỏ khi cửa sổ xem nhỏ hơn và lớn hơn khi ở màn hình lớn hơn.

Trên đây là một số mẹo giúp bạn tạo bố cục đáp ứng cho web. Bạn hay thiết kế web như thế nào? Hãy chia sẻ kinh nghiệm cùng độc giả Quantrimang.com nhé!