Cách sử dụng Điểm ngắt và Truy vấn phương tiện với Tiện ích “tràn” 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 các tiện ích “tràn” trong Tailwind CSS.

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

Để áp dụng các điểm dừng cụ thể và truy vấn phương tiện trên các tiện ích 'tràn' trong Tailwind, hãy tạo cấu trúc HTML. Sau đó, sử dụng “ md ' hoặc ' lg ” điểm dừng với mong muốn 'tràn-' các tiện ích để kiểm soát hành vi tràn của thành phần được chỉ định trên các kích thước màn hình khác nhau. Tiếp theo, thay đổi kích thước màn hình của trang web để xác minh.

Ví dụ
Trong ví dụ này, chúng ta sẽ sử dụng “md” điểm dừng với 'cuộn tràn' tiện ích trong

Đây:

• Các 'tràn-tự động' lớp được sử dụng để thêm thanh cuộn vào vùng chứa và chỉ hiển thị chúng khi cần cuộn.
• Các “md:overflow-scroll” lớp thêm các thanh cuộn và luôn hiển thị chúng trên “md” điểm dừng (kích thước màn hình trung bình).

Đầu ra:


---





---

Theo đầu ra ở trên, các điểm ngắt và truy vấn phương tiện đã được áp dụng thành công trên các tiện ích 'tràn'.

Phần kết luận

Để áp dụng các điểm dừng và truy vấn phương tiện trên các tiện ích “tràn” trong Tailwind, hãy sử dụng “ sm ”, “ md ' hoặc ' lg ” điểm dừng với mong muốn “ tràn- ” tiện ích trong chương trình HTML. Các điểm dừng này kiểm soát hành vi tràn của phần tử được chỉ định trên các kích thước màn hình khác nhau. Bài viết này đã minh họa ví dụ để áp dụng các điểm dừng và truy vấn phương tiện cụ thể trên các tiện ích “tràn” trong Tailwind.