Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

Hướng dẫn nhanh: Xây dựng Bố cục Có tính đáp ứng với Float

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn nhanh của ngày hôm nay, chúng ta sẽ tìm hiểu cách xây dựng bố cục đáp ứng bằng cách sử dụng CSS float, một phương pháp đáng tin cậy nhưng chưa cũ. Xong cái đó, chúng ta sẽ xem cách Bootstrap xử lý các thứ. Float ban đầu không được dự định để thực hiện cấu trúc cơ bản của một trang web (các tiêu chuẩn CSS mới hơn như flexbox và grid nhằm mục đích thực hiện điều đó), vì vậy làm việc với float có thể đôi khi rắc rối. Hãy xem một ví dụ để minh hoạ điều đó.

Xây dựng một bố cục có tính đáp ứng (Responsive)

Giả sử rằng chúng ta muốn xây dựng bố cục dạng thẻ bài này:

Kiểm tra với kích thước đầy đủ để có một hình dung rõ hơn.

Các phong cách cơ bản

Đối với các thẻ này, chúng ta không muốn thiết lập chiều cao cố định cho các chú thích. Chúng ta cũng không muốn chúng có chiều rộng cố định. Do đó, để giữ cho các thẻ có thể sử dụng được, chúng không nên bị ép vào quá nhiều, chúng ta cần hiển thị một số cột khác nhau tùy thuộc vào kích thước viewport.

Chúng ta thiết lập một số media query, do đó những thứ sau đây là chính xác:

Viewport No. of columns
<400px
1
≥400px
2
≥768px
3
≥1024px
4

Đây là mã đánh dấu; các phần tử của danh sách chứa các hình ảnh và lời chú thích bên trong các phần tử figure:

Dưới đây là CSS để định phong cách cho bố cục đó:

Bạn sẽ nhận thấy các media query ở phía dưới, điều khiển cách các thẻ hiển thị tại những viewport nhất định. Dưới đây là những gì nó mang lại cho chúng ta:

Tuy nhiên, vấn đề với bố cục này đó là không áp dụng thuộc tính clear cho mỗi dòng mới, một số thẻ không thể dịch chuyển về bên trái.

Xác định các thẻ để áp dụng thuộc tính clear

Theo như ví dụ ở trên, khi một dòng chứa bốn thẻ, chúng ta cần phải áp dụng clear cho cái thứ năm, sau đó thứ chín, và cứ như vậy. Để đạt được điều này, chúng ta sử dụng lớp giả CSS :nth-of-type(an+b) trong đó các tham số an+b đại diện cho các mẫu lặp lại. Ví dụ, trên màn hình lớn (tức là ≥1024px), chúng ta sử dụng 4n+1. Công thức này tìm kiếm mỗi phần tử có thứ tự là một cấp số của bốn, sau đó chọn cái kết tiếp.

Dưới đây là cách chúng ta có thể thay đổi các media query để thay đổi các thẻ được áp dụng thuộc tính clear:

Viewport No. of columns Repeating pattern
<400px
1 -
≥400px
2 2n+1
≥768px
3 3n+1
≥1024px
4 4n+1

Và đây là mã CSS để đạt được điều đó. Lưu ý rằng các media query của chúng ta được chồng lên nhau, do đó, chúng ta phải đặt lại thẻ đã clear trước đó mỗi lần chúng ta định nghĩa một cái mới:

Cuối cùng, cần phải lưu ý những điều sau đây:

  • Thay vì thuộc tính clear:left chúng ta có thể sử dủng thuộc tính thông dụng hơn clear:both.
  • Thay vì lớp giả CSS :nth-of-type(an+b), chúng ta có thể sử dụng :nth-child(an+b).

Bây giờ chúng ta đã thảo luận về một phương pháp cho việc áp dụng thuộc tính clear, để hiểu thêm chúng ta hãy xem xét một phương pháp tiếp cận bằng Bootstrap.

Sử dụng phương pháp của Bootstrap

Bằng cách tận dụng hệ thống grid của Bootstrap, chúng ta có thể xây dựng một bố cụ đáp ứng tương tự với cái trước. Một lần nữa, tùy thuộc vào kích thước viewport mà bố cục của chúng ta sẽ thay đổi:

Viewport No. of columns
<768px
2
≥768px
3
≥992px
3
≥1200px
4

Dưới đây là mã HTML cần thiết, nó nói lên rằng các phần tử trong danh sách của chúng ta chiếm đến sáu trong mười hai cột trên một viewport hơi nhỏ, bốn cột trên viewport nhỏ, sau đó ba cột trên viewport lớn:

Thông thường, mã đánh dấu này là tất cả những gì chúng ta cần, giả định tất cả các cột có chiều cao bằng nhau. Tuy nhiên, trong ví dụ của chúng ta, các cột có độ cao khác nhau, vì vậy chúng ta sẽ cần phải áp dụng thuộc tính clear. Để làm điều này, chúng ta sẽ sử dụng lớp clearfix như là lớp tiện ích.

Đầu tiên, trên màn hình hơi nhỏ (<768px), chúng ta có một bố cục hai cột, do đó chúng ta nên áp dụng thuộc tính clear sau mỗi hai phần tử của danh sách. Và mã đánh dấu sau đây sau mỗi hai phần tử của danh sách:

Tiếp theo, trên các màn hình vừa và nhỏ (≥768px và < 1200px), chúng ta có một bố cục ba cột, do đó, chúng ta cần phải áp dụng thuộc tính clear vào mỗi ba phần tử của danh sách. Để làm điều này, chúng ta thêm một số mã đánh dấu phụ mỗi ba phần tử của danh sách (không cần thiết đối với cái cuối cùng):

Cuối cùng, trên màn hình lớn (≥1200px), chúng ta có một bố cục bốn cột, vì vậy chúng ta nên áp dụng thuộc tính clear sau mỗi bốn phần tử của danh sách. Một lần nữa, thêm một số mã đánh dấu, lần này sau mỗi bốn phần tử của danh sách:

Các mã bổ sung này hơi lộn xộn một chút (rất nhiều người không thích sử dụng mã đánh dấu để dẫn dắt các phong cách) nhưng chúng đạt được cùng một kết quả cuối cùng như là phương pháp đầu tiên của chúng ta. Mỗi phần tử của danh sách được ẩn đi, ngoại trừ ở dưới những breakpoint nhất định khi chúng có thuộc tính display: block; có tác dụng như là đường kẻ phân chia giữa các dòng của chúng ta.

Dưới đây là bản demo:

Kết luận

Trong bài viết ngắn này, chúng ta đã tìm hiểu hai kỹ thuật cho việc tạo các bố cục có tính đáp ứng với float. Mặc dù float có thể không là (và không nên) lựa chọn đầu tiên cho các bố cụ hiện đại của bạn, nhưng tôi hy vọng rằng có lúc bạn sẽ thấy các kỹ thuật này là hữu ích. Nếu bạn đang sử dụng bất kỳ kỹ thuật nào khác, hãy chia sẻ với chúng tôi!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.