Ten artykuł zilustruje metodę stosowania punktów przerwania i zapytań o media w narzędziach „przepełnienia” w Tailwind CSS.
Jak wykorzystać punkty przerwania i zapytania o media z „przepełnieniem” w Tailwind?
Aby zastosować określone punkty przerwania i zapytania o media w narzędziach „przepełnienia” w Tailwind, utwórz strukturę HTML. Następnie użyj „ md ' Lub ' lg ” punkty przerwania z pożądanym „przepełnienie-
Przykład
W tym przykładzie użyjemy „md” punkt przerwania z „przepełnienie-przewiń” użyteczność w
kontener, aby dodać do niego paski przewijania i zawsze pokazuje je na średnim rozmiarze ekranu: < ciało >
< dz klasa = „overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 justowanie tekstu” >
Tailwind CSS zapewnia różne narzędzia „przepełnienia”, takie jak
„przepełnienie-automatyczne”, „przepełnienie-przewiń”, „przepełnienie-ukryte”, „przepełnienie-widoczne”
itp. Te narzędzia określają, w jaki sposób określony element obsługuje zawartość
który przekracza rozmiar pojemnika. Każde narzędzie oferuje unikalną funkcjonalność,
jednak ich ostateczny cel pozostaje ten sam, tj. kontrolowanie przelewu
zachowanie wybranego elementu.
< / dz >
< / ciało >
Tutaj:
- The „przepełnienie-automatyczne” klasa służy do dodawania pasków przewijania do pliku kontenera i pokazuj je tylko wtedy, gdy przewijanie jest konieczne.
- The „md: przewijanie przepełnienia” class dodaje paski przewijania i zawsze pokazuje je na „md” punkt przerwania (średni rozmiar ekranu).
Wyjście:
Zgodnie z powyższym wynikiem punkty przerwania i zapytania o media zostały z powodzeniem zastosowane w narzędziach „przepełnienia”.
Wniosek
Aby zastosować punkty przerwania i zapytania o media w narzędziach „przepełnienia” w Tailwind, użyj „ sm ”, „ md ' Lub ' lg ” punkty przerwania z żądanym “ przepełnienie-