Denne artikel vil demonstrere metoden til at bruge 'break-after' med breakpoints og medieforespørgsler i Tailwind CSS.
Hvordan kan man bruge 'pause-efter' med brudpunkter og medieforespørgsler i medvind?
For at bruge et 'break-after' med breakpoints og medieforespørgsler, skal du definere forskellige værdier og stil for forskellige skærmstørrelser med 'break-after'-værktøjet i HTML-programmet. Bekræft derefter outputtet ved at se HTML-websiden.
Lad os undersøge den praktiske implementering:
Trin 1: Brug Breakpoints og Medieforespørgsler med 'break-after' Utility
Opret et HTML-program og angiv forskellige værdier og stil for forskellige skærmstørrelser med 'break-after'-værktøjet. For eksempel har vi brugt ' md ' brudpunkt med ' pause-efter-kolonne ' værktøjet og ' lg ' brudpunkt med ' pause-efter-undgå ' værktøj:
< legeme >
< div klasse = 'kolonner-2 bg-teal-400' >
< s klasse = 'md:pause-efter-kolonne lg:pause-efter-undgå' > Hej... < / s >
< s > Velkommen her... < / s >
< s > Lær om Tailwind CSS... < / s >
< s > Det er en CSS-ramme... < / s >
< s > Farvel... < / s >
< / div >
< / legeme >
Her:
- Det ' md:pause-efter-kolonne '-klassen angiver, at der skal ske et kolonneskift efter dette specifikke
-element ved ' md ” brudpunkt (mellem skærmstørrelse).
- Det ' lg:pause-efter-undgå ” klasse foreslår, at elementet skal undgå pause efter ved ” lg ” brudpunkt (stor skærmstørrelse).
Trin 2: Bekræft output
Bekræft, om brudpunkterne og medieforespørgslerne er blevet anvendt ved at se HTML-websiden:
På ovenstående webside er spaltebruddet sket på det angivne element ved den mellemstore skærm, og pausen efter er undgået ved den store skærm.
Konklusion
For at bruge 'break-after' med breakpoints og medieforespørgsler i Tailwind, skal du først oprette en HTML-fil. Brug derefter breakpoints og medieforespørgsler med 'break-after'-værktøjet ved at angive forskellige værdier og stil for forskellige skærmstørrelser. For verifikation skal du køre HTML-programmet og se websiden. Denne artikel har demonstreret metoden til at bruge 'break-after' med breakpoints og medieforespørgsler i Tailwind CSS.