5 mẹo hữu ích để tạo bố cục đáp ứng

Hãy tưởng tượng rằng bạn đã làm tất cả công việc khó khăn để tạo ra một bố cục thực sự bắt mắt. Nhưng sau đó, khi bạn làm cho cửa sổ trình duyệt của mình nhỏ hơn một chút, bạn sẽ thấy thứ gì đó tràn ra ngoài. Bạn đưa vào một truy vấn phương tiện để khắc phục sự cố. Nhưng khi thay đổi kích thước cửa sổ, bạn nhận thấy rằng một số thứ khác đã bị hỏng.

Đây là điều mà hầu hết các nhà phát triển CSS sẽ trải nghiệm tại một thời điểm. Nhưng may mắn thay, chúng tôi có một số giải pháp CSS hiện đại giúp việc phát triển mọi thứ và khiến chúng hoạt động tốt trở nên dễ dàng hơn rất nhiều. Bài viết này khám phá 5 thực tiễn hữu ích cần ghi nhớ khi phát triển trang web. Những lời khuyên này sẽ giúp bạn tránh được những chỗ đứt quãng khó chịu trong thiết kế của mình.

1. Bắt đầu với Global Style Sheet

Luôn bắt đầu với kiểu dáng toàn cầu khi viết CSS. Đừng lo lắng về bố cục. Thay vào đó, hãy đặt các kiểu chung như kiểu chữ, màu sắc và hình nền. Đặt lại lề, xóa gạch chân khỏi liên kết, v.v.

Sau khi hoàn thành kiểu dáng chung, bạn có thể bắt đầu tạo bố cục và nhắm mục tiêu các phần tử riêng lẻ trong bố cục. Về cơ bản, hãy bắt đầu từ trên cùng và sau đó chuyển sang các yếu tố.

Ví dụ CSS sau đây đặt lại lề trên tất cả các phần tử thành 0, xác định kiểu chữ và màu sắc của tất cả các tiêu đề chính, đồng thời thêm một lề nhất quán cho tất cả chúng:

 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;
}
 

Bây giờ bạn đã xác định tất cả các kiểu cơ sở, bạn có thể xây dựng từ đó. Ví dụ: bạn có thể thêm phần đệm vào phần tử vùng chứa. Điều này sẽ đẩy nội dung ra khỏi các cạnh của trình duyệt của bạn. Sau đó, bạn có thể áp dụng một chiều rộng tối đa vào hình ảnh để chúng có thể thích ứng với chiều rộng của vùng chứa. Vấn đề là bắt đầu từ các yếu tố chung trước khi nhắm mục tiêu các yếu tố cụ thể.

Một lần nữa, bố cục sẽ đáp ứng. Vì vậy, khi bạn thay đổi kích thước màn hình, kích thước của các phần tử sẽ thay đổi tương ứng. Là nhà phát triển, bạn nên biết các mẹo và thủ thuật CSS này vì chúng có thể nâng năng suất của bạn lên một tầm cao mới.

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

Khi bạn bắt đầu nghĩ về bố cục, điều đầu tiên bạn nên ghi nhớ là tránh các kích thước cố định. Kích thước cố định đề cập đến các thuộc tính như chiều rộng: 1000px, chiều cao: 200px, và như thế. Đặt chiều cao hoặc chiều rộng cố định sẽ chỉ gây ra sự cố cho bạn về lâu dài.

Thay vào đó, hãy sử dụng chiều cao và chiều rộng thích ứng. Một cách là sử dụng chiều cao tối thiểu Và chiều rộng tối thiểu thay vì chiều cao Và chiều rộng. Ví dụ: giả sử bạn đặt chiều rộng của phần tử là 600px. Khi bạn đi nhỏ hơn 600px, thì nội dung sẽ tràn:

Thay vào đó, bạn nên thay đổi thuộc tính từ chiều rộng ĐẾN chiều rộng tối đa. Với chiều rộng tối đa, phần tử sẽ được phép thu nhỏ khi cửa sổ trình duyệt bị thu hẹp. Và nếu cửa sổ trở nên rộng, văn bản sẽ mở rộng trở lại độ dài ban đầu. Đây là kết quả:

Điều này cũng giống như vậy đối với chiều cao. Ví dụ: giả sử bạn đặt chiều cao của một tiêu đề thành một giá trị cố định của 200px.

 header {
  height: 200px;
  display: grid;
  place-items: center;
}
 

Điều này căn giữa mọi thứ trong tiêu đề một cách hoàn hảo. Nhưng khi bạn thu hẹp cửa sổ trình duyệt, nội dung cuối cùng sẽ chảy ra khỏi vùng chứa của nó. Và điều này là do bạn đặt chiều cao cố định trên tiêu đề.

Nói chung là, chiều cao Và chiều rộng đều là những đặc tính nguy hiểm. Giải pháp là sử dụng chiều cao và chiều rộng có thể thích ứng, tức là, phút- Và chiều cao tối đaVà phút- Và chiều rộng tối đa. Trong những trường hợp này, nếu trình duyệt gặp tình huống nội dung ngày càng dài hơn, thì tiêu đề sẽ phát triển để thích ứng với điều đó.

Đây là một trong những lỗi CSS phổ biến nhất mà bạn nên tránh.

3. Hãy nhớ rằng trang web của bạn được đáp ứng theo mặc định

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 trang web thích ứng với chế độ xem bất kể kích thước của nó.

Tất nhiên, hình ảnh có thể tràn và văn bản có thể quá nhỏ. Nhưng bạn sẽ không mất bất cứ thứ gì với bố cục mặc định. Văn bản của bạn sẽ không bị ngắt và tất cả các thành phần sẽ hiển thị trên màn hình.

Hiểu và chấp nhận thực tế này thực sự có thể hữu ích khi bạn viết mã CSS. Khi gặp sự cố, bạn sẽ chắc chắn rằng lỗi bắt nguồn từ CSS mà bạn đã viết. Điều này làm cho nó dễ dàng hơn để tìm ra vấn đề và khắc phục nó.

Cố gắng chỉ sử dụng các truy vấn phương tiện để tăng thêm độ phức tạp. Ví dụ: khi bạn muốn bố cục của mình có ba cột trên màn hình lớn hơn. Nếu không, không sử dụng chúng. Để tìm hiểu sâu về truy vấn phương tiện, hãy đọc hướng dẫn về truy vấn phương tiện của chúng tôi.

Đây là một kịch bản. Hãy tưởng tượng rằng phần tử có tên lớp là .tách ra có ba yếu tố bên trong nó. Với CSS sau, bố cục ba cột sẽ được tạo:

 .split {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
 

Trong màn hình nhỏ hơn (40em rộng hoặc nhỏ hơn), bạn muốn mọi thứ chiếm một cột. Vì vậy, bạn sẽ làm điều này:

 @media(max-width: 40em) {
  .split {
    display: block;
  }
}
 

Tại đây, bạn đang ghi đè căn chỉnh mặc định (ba cột). Nhưng truy vấn phương tiện là không cần thiết vì trình duyệt sử dụng hiển thị: khối theo mặc định. Vì vậy, bạn không cần phải xác định rõ ràng nó.

Với ý nghĩ đó, bạn có thể cấu trúc lại mã của mình để sử dụng một truy vấn phương tiện duy nhất chỉ áp dụng cho màn hình lớn. Ở đó, bạn sẽ chuyển sang ba cột khi màn hình rộng hơn 40em:

 @media(max-width: 40em) {
  .split {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}
 

Trên màn hình nhỏ, trình duyệt xếp mọi thứ vào một cột. Nhưng bạn không cần phải chỉ định nó vì trình duyệt sử dụng hiển thị: khối theo mặc định. Vì vậy, bạn chỉ sử dụng các truy vấn phương tiện để tăng thêm độ phức tạp.

Vì vậy, thay vì thêm độ phức tạp và sau đó phải ghi đè một loạt thuộc tính, giờ đây bạn thêm độ phức tạp khi cần. Hầu hết thời gian, bạn sẽ chỉ cần chiều rộng tối thiểu truy vấn phương tiện truyền thông. Bắt đầu với ưu tiên thiết bị di động, sau đó khi trang web trông tuyệt vời trên thiết bị di động, hãy thêm độ phức tạp (ví dụ: cột) cho phiên bản dành cho máy tính để bàn.

5. Tận 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ế nội tại.

Một cách bạn có thể làm là:

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

Cái này kẹp h1 giữa kích thước phông chữ tối thiểu và tối đa. Nhỏ nhất chúng tôi muốn nó đi đến là 3rem và cao nhất là 7rem. Phần giữa là những gì chúng ta sẽ lặp lại (1rem + 10 vw). Do đó, tiêu đề sẽ tự động thu nhỏ khi khung nhìn nhỏ hơn và lớn hơn khi khung nhìn trở nên lớn hơn.

Tìm hiểu thêm về CSS hiện đại

CSS đã phát triển rất nhiều trong những năm qua. Ngày nay, chúng ta có những cách tiếp cận mới hơn và tốt hơn để định vị các phần tử trong CSS. Trong bài viết này, chúng tôi đã đề cập đến một số phương pháp này và nhấn mạnh cách chúng có thể giúp bạn tránh những cạm bẫy thiết kế phổ biến. Một trong những cách tốt nhất để học CSS hiện đại là thông qua phương pháp thực hành, chẳng hạn như sử dụng CSS hiện đại để thiết kế bảng HTML.