Bài viết này sẽ minh họa phương pháp sử dụng các điểm dừng đáp ứng trong Tailwind CSS.
Cách sử dụng Điểm ngắt đáp ứng trong Tailwind?
Để sử dụng điểm ngắt phản hồi trong Tailwind, hãy sử dụng công cụ sửa đổi phản hồi, chẳng hạn như “ sm ”, “ md ”, “ lg ”, “ xl ' Và ' 2xl ” với các lớp khác trong chương trình HTML. Sau đó, xem trang web HTML và thay đổi kích thước màn hình để đảm bảo rằng các điểm dừng đang hoạt động bình thường.
Bước 1: Sử dụng Công cụ sửa đổi đáp ứng trong Chương trình HTML
Tạo một chương trình HTML và sử dụng các công cụ sửa đổi đáp ứng với kiểu dáng mong muốn. Ví dụ, chúng tôi đã sử dụng “ sm ”, “ md ”, “ lg ”, “ xl ' Và ' 2xl ” công cụ sửa đổi đáp ứng:
< thân hình >
< div lớp học = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 lớp học = 'text-7xl text-white text-center p-20' > Gợi ý Linux < / h1 >
< / div >
< / thân hình >
Đây:
- “ bg-fuchsia-400 ” lớp thiết lập màu nền của đến hoa vân anh.
- “ sm:bg-hồng-600 ” lớp áp dụng màu hồng làm nền cho màn hình nhỏ.
- “ md:bg-green-700 ” lớp thay đổi màu nền thành màu xanh lá cây trên màn hình trung bình.
- “ lg:bg-tím-50 ” đặt màu nền thành màu tím cho màn hình lớn.
- “ xl:bg-teal-600 ” lớp áp dụng màu xanh mòng két cho nền cho màn hình cực lớn.
- “ 2xl:bg-vàng-500 ” lớp thay đổi màu nền thành màu vàng trên màn hình 2xl.
Bước 2: Xác minh đầu ra
Xem trang web HTML để xác minh xem các điểm ngắt phản hồi có hoạt động bình thường hay không:
Trong trang web trên, có thể nhận thấy rằng màu của trang web đang thay đổi theo kích thước màn hình theo đó các điểm ngắt được chỉ định.
Phần kết luận
Để sử dụng điểm ngắt phản hồi trong Tailwind, hãy sử dụng công cụ sửa đổi phản hồi, chẳng hạn như “ sm ”, “ md ”, “ lg ”, “ xl ' Và ' 2xl ” với các lớp khác trong chương trình HTML. Các công cụ sửa đổi này được sử dụng để áp dụng các kiểu khác nhau cho một thành phần cụ thể dựa trên kích thước màn hình. Bài viết này đã minh họa phương pháp sử dụng các điểm ngắt đáp ứng trong Tailwind CSS.