W tym artykule zademonstrujemy metodę wykorzystania „przerwy po” z punktami przerwania i zapytaniami o media w CSS Tailwind.
Jak wykorzystać „przerwę po” z punktami przerwania i zapytaniami o media w Tailwind?
Aby wykorzystać „przerwę po” z punktami przerwania i zapytaniami o media, zdefiniuj różne wartości i style dla różnych rozmiarów ekranu za pomocą narzędzia „przerwa po” w programie HTML. Następnie sprawdź dane wyjściowe, przeglądając stronę internetową HTML.
Przyjrzyjmy się praktycznej realizacji:
Krok 1: Użyj punktów przerwania i zapytań o media za pomocą narzędzia „break-after”.
Utwórz program HTML i określ różne wartości i style dla różnych rozmiarów ekranu za pomocą narzędzia „break-after”. Na przykład użyliśmy „ md ” punkt przerwania z „ przerwa po kolumnie ” narzędzie i „ lg ” punkt przerwania z „ przerwa po uniknięciu ' pożytek:
< ciało >
< dz klasa = 'kolumny-2 bg-turkusowy-400' >
< P klasa = 'md:przerwanie-po-kolumnie lg:przerwanie-po-unikaniu' > Cześć... < / P >
< P > Witaj tutaj... < / P >
< P > Dowiedz się więcej o CSS Tailwind... < / P >
< P > Jest to framework CSS... < / P >
< P > Do widzenia... < / P >
< / dz >
< / ciało >
Tutaj:
- „ md:przerwa-po-kolumnie ” wskazuje, że podział kolumny powinien nastąpić po tym konkretnym elemencie
w punkcie „ md ” punkt przerwania (średni rozmiar ekranu).
- „ lg: przerwa-po-unikaniu ” sugeruje, że element powinien unikać przerwy w „ lg ” punkt przerwania (duży rozmiar ekranu).
Krok 2: Sprawdź dane wyjściowe
Sprawdź, czy punkty przerwania i zapytania o media zostały zastosowane, przeglądając stronę HTML:
Na powyższej stronie internetowej podział kolumny wystąpił na określonym elemencie na średnim ekranie, a przerwa po nim została uniknięta na dużym ekranie.
Wniosek
Aby wykorzystać „przerwanie po” z punktami przerwania i zapytaniami o media w Tailwind, najpierw utwórz plik HTML. Następnie użyj punktów przerwania i zapytań o media za pomocą narzędzia „break-after”, określając różne wartości i style dla różnych rozmiarów ekranu. W celu weryfikacji uruchom program HTML i wyświetl stronę internetową. Ten artykuł zademonstrował metodę wykorzystania „przerwy po” z punktami przerwania i zapytaniami o media w CSS Tailwind.