Ten opis zilustruje metodę użycia responsywnych punktów przerwania w CSS Tailwind.
Jak korzystać z responsywnych punktów przerwania w Tailwind?
Aby użyć responsywnych punktów przerwania w Tailwind, użyj modyfikatorów responsywności, takich jak „ sm ”, „ md ”, „ lg ”, „ xl ' I ' 2xl ” z innymi klasami w programie HTML. Następnie wyświetl stronę internetową HTML i zmień rozmiar ekranu, aby upewnić się, że punkty przerwania działają poprawnie.
Krok 1: Użyj responsywnych modyfikatorów w programie HTML
Stwórz program HTML i użyj responsywnych modyfikatorów z pożądanym stylem. Na przykład użyliśmy „ sm ”, „ md ”, „ lg ”, „ xl ' I ' 2xl modyfikatory responsywne:
< ciało >
< dz klasa = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-turkusowy-600 2xl:bg-yellow-500' >
< h1 klasa = 'text-7xl text-white text-center p-20' > Wskazówka dotycząca Linuksa < / h1 >
< / dz >
< / ciało >
Tutaj:
- “ bg-fuksja-400 ” klasa ustawia kolor tła pliku do fuksji.
- “ sm:bg-różowy-600 ” stosuje różowy kolor tła dla małych ekranów.
- “ md: bg-zielony-700 ” zmienia kolor tła na zielony na średnich ekranach.
- “ lg:bg-fioletowy-50 ” ustawia kolor tła na fioletowy dla dużych ekranów.
- “ xl: bg-turkusowy-600 ” stosuje turkusowy kolor tła dla bardzo dużych ekranów.
- “ 2xl:bg-żółty-500 ” zmienia kolor tła na żółty na ekranach 2xl.
Krok 2: Sprawdź dane wyjściowe
Wyświetl stronę internetową HTML, aby sprawdzić, czy responsywne punkty przerwania działają prawidłowo, czy nie:
Na powyższej stronie internetowej można zauważyć, że kolor strony internetowej zmienia się wraz z rozmiarem ekranu, zgodnie z którym określono punkty przerwania.
Wniosek
Aby użyć responsywnych punktów przerwania w Tailwind, użyj modyfikatorów responsywności, takich jak „ sm ”, „ md ”, „ lg ”, „ xl ' I ' 2xl ” z innymi klasami w programie HTML. Modyfikatory te służą do stosowania różnych stylów do określonego elementu w zależności od rozmiaru ekranu. Ten opis ilustruje metodę wykorzystania responsywnych punktów przerwania w CSS Tailwind.