Bài viết này sẽ trình bày phương pháp sử dụng tính năng “break-after” với các điểm dừng và truy vấn phương tiện trong Tailwind CSS.
Làm cách nào để sử dụng “break-after” với Breakpoints và Media Queries trong Tailwind?
Để sử dụng “break-after” với các điểm ngắt và truy vấn phương tiện, hãy xác định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau bằng tiện ích “break-after” trong chương trình HTML. Sau đó, xác minh đầu ra bằng cách xem trang web HTML.
Hãy để chúng tôi khám phá việc thực hiện thực tế:
Bước 1: Sử dụng Breakpoints và Media Queries Với tiện ích “break-after”
Tạo một chương trình HTML và chỉ định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau bằng tiện ích “break-after”. Chẳng hạn, chúng tôi đã sử dụng “ md ” điểm ngắt với “ ngắt sau cột ” tiện ích và “ lg ” điểm ngắt với “ phá vỡ-sau-tránh ' tính thiết thực:
< thân hình >
< div lớp học = 'cột-2 bg-teal-400' >
< P lớp học = 'md:ngắt-sau-cột lg:ngắt-sau-tránh' > Xin chào... < / P >
< P > Chào mừng tới đây... < / P >
< P > Tìm hiểu về Tailwind CSS... < / P >
< P > Nó là một khung CSS ... < / P >
< P > Tạm biệt... < / P >
< / div >
< / thân hình >
Đây:
- Các ' md:break-after-column ” lớp chỉ ra rằng ngắt cột sẽ xảy ra sau phần tử
cụ thể này tại “ md ” điểm dừng (kích thước màn hình trung bình).
- Các ' lg:break-after-tránh ” lớp gợi ý rằng phần tử nên tránh ngắt sau tại “ lg ” điểm dừng (kích thước màn hình lớn).
Bước 2: Xác minh đầu ra
Xác minh xem các điểm ngắt và truy vấn phương tiện đã được áp dụng hay chưa bằng cách xem trang web HTML:
Trong trang web trên, ngắt cột đã xảy ra trên thành phần được chỉ định ở màn hình trung bình và ngắt sau đã tránh được ở màn hình lớn.
Phần kết luận
Để sử dụng tính năng “break-after” với các điểm dừng và truy vấn phương tiện trong Tailwind, trước tiên, hãy tạo một tệp HTML. Sau đó, sử dụng các điểm dừng và truy vấn phương tiện với tiện ích “break-after” bằng cách chỉ định các giá trị và kiểu dáng khác nhau cho các kích thước màn hình khác nhau. Để xác minh, hãy chạy chương trình HTML và xem trang web. Bài viết này đã trình bày phương pháp sử dụng tính năng “break-after” với các điểm dừng và truy vấn phương tiện trong Tailwind CSS.