Làm cách nào để áp dụng các điểm dừng và truy vấn phương tiện trên lưới hàng trong Tailwind?

Bài viết này sẽ minh họa phương pháp áp dụng các điểm ngắt và truy vấn phương tiện trên lưới hàng trong Tailwind CSS.

Làm cách nào để áp dụng các điểm dừng và truy vấn phương tiện trên lưới hàng trong Tailwind?

Để áp dụng các điểm dừng và truy vấn phương tiện trên lưới hàng trong Tailwind, hãy tạo một chương trình HTML. Sau đó, xác định số lượng hàng cho các kích thước màn hình khác nhau bằng cách sử dụng “ sm ”, “ md ' hoặc ' lg ” điểm dừng với “ lưới-hàng- ” tiện ích. Tiếp theo, đảm bảo các thay đổi trên trang web bằng cách điều chỉnh kích thước màn hình.

Hãy để chúng tôi khám phá việc thực hiện thực tế:

Bước 1: Sử dụng Điểm dừng và Truy vấn Phương tiện Với Lưới Hàng trong Chương trình HTML
Tạo một chương trình HTML và xác định số hàng cho các kích thước màn hình khác nhau với “ lưới-hàng- ' tính thiết thực. Ví dụ, chúng tôi đã sử dụng “ md ” điểm ngắt với “ lưới-hàng-3 ” tiện ích và“ lg ” điểm dừng với “ lưới-hàng-5 ” tiện ích để thay đổi số lượng hàng trên các kích thước màn hình khác nhau:

Đây:

• “ lưới ” lớp được sử dụng để tạo bố cục dạng lưới.
• “ lưới-hàng-2 ” chỉ định rằng lưới phải có 2 hàng có kích thước bằng nhau.
• “ md:lưới-hàng-3 ” lớp thay đổi lưới thành 3 hàng có kích thước bằng nhau trên kích thước màn hình trung bình.
• “ lg:lưới-hàng-5 ” lớp thay đổi lưới thành 5 hàng có kích thước bằng nhau trên kích thước màn hình lớn.
• “ grid-flow-col ” lớp đặt các mục lưới theo chiều ngang trong các cột.
• “ khoảng cách-3 ” lớp đặt khoảng cách 3 đơn vị giữa mỗi mục lưới.
• “ m-3 ” lớp áp dụng lề 3 đơn vị xung quanh vùng chứa lưới.
• “ trung tâm văn bản ” lớp đặt văn bản của từng mục lưới vào trung tâm.
• “ bg-teal-500 ” đặt màu xanh mòng két cho nền của các mục lưới.
• “ p-5 ” lớp thêm phần đệm 5 đơn vị vào nội dung bên trong lớp con mặt hàng.

  Bước 2: Xác minh đầu ra
  Để đảm bảo rằng các điểm dừng và truy vấn phương tiện đã được áp dụng trên lưới hàng, hãy xem trang web HTML bằng cách thay đổi kích thước màn hình:

  

  
  
  

  Trong đầu ra ở trên, có thể thấy rằng số lượng hàng thay đổi theo kích thước màn hình. Điều này cho biết rằng các điểm ngắt và truy vấn phương tiện đã được áp dụng thành công trên lưới hàng.

  Phần kết luận

  Để áp dụng các điểm ngắt và truy vấn phương tiện trên lưới hàng trong Tailwind, hãy xác định số lượng hàng cho các kích thước màn hình khác nhau bằng cách sử dụng “ sm ”, “ md ' hoặc ' lg ” điểm dừng với “ lưới-hàng- ” tiện ích. Sau đó, đảm bảo các thay đổi trên trang web bằng cách thay đổi kích thước màn hình. Bài viết này đã minh họa phương pháp áp dụng các điểm ngắt và truy vấn phương tiện trên lưới hàng trong Tailwind CSS.