Acest articol va demonstra metoda de utilizare a „break-after” cu puncte de întrerupere și interogări media în Tailwind CSS.
Cum să utilizați „break-after” cu puncte de întrerupere și interogări media în Tailwind?
Pentru a utiliza un „break-after” cu puncte de întrerupere și interogări media, definiți diferite valori și stiluri pentru diferite dimensiuni de ecran cu utilitarul „break-after” din programul HTML. Apoi, verificați rezultatul vizualizând pagina web HTML.
Să explorăm implementarea practică:
Pasul 1: Utilizați punctele de întrerupere și interogările media cu utilitarul „break-after”.
Creați un program HTML și specificați diferite valori și stiluri pentru diferite dimensiuni de ecran cu utilitarul „break-after”. De exemplu, am folosit „ md ” punct de întrerupere cu ” pauză după coloană „utilitatea și „ lg ” punct de întrerupere cu ” pauză după-evita ” utilitate:
< corp >
< div clasă = „coloane-2 bg-teal-400” >
< p clasă = „md:break-after-coloana lg:break-after-avoid” > Buna ziua... < / p >
< p > Bine ai venit aici... < / p >
< p > Aflați despre Tailwind CSS... < / p >
< p > Este un cadru CSS... < / p >
< p > Pa... < / p >
< / div >
< / corp >
Aici:
- „ md:break-după-coloană ” indică faptul că ar trebui să apară o întrerupere a coloanei după acest element specific
la „ md ” Punct de întrerupere (dimensiune medie a ecranului).
- „ lg:break-after-avoid ” sugerează că elementul ar trebui să evite întreruperea după la “ lg ” Punct de întrerupere (dimensiunea ecranului mare).
Pasul 2: Verificați ieșirea
Verificați dacă punctele de întrerupere și interogările media au fost aplicate vizualizând pagina web HTML:
În pagina web de mai sus, întreruperea coloanei a avut loc pe elementul specificat pe ecranul mediu, iar întreruperea după a fost evitată pe ecranul mare.
Concluzie
Pentru a utiliza „break-after” cu puncte de întrerupere și interogări media în Tailwind, creați mai întâi un fișier HTML. Apoi, utilizați punctele de întrerupere și interogările media cu utilitarul „break-after”, specificând valori și stiluri diferite pentru diferite dimensiuni de ecran. Pentru verificare, rulați programul HTML și vizualizați pagina web. Acest articol a demonstrat metoda de utilizare a „break-after” cu puncte de întrerupere și interogări media în Tailwind CSS.