Questo articolo dimostrerà il metodo per utilizzare il 'break-after' con breakpoint e media query in Tailwind CSS.
Come utilizzare 'break-after' con punti di interruzione e query multimediali in Tailwind?
Per utilizzare un 'break-after' con punti di interruzione e media query, definire valori e stili diversi per diverse dimensioni dello schermo con l'utilità 'break-after' nel programma HTML. Quindi, verificare l'output visualizzando la pagina Web HTML.
Analizziamo l'implementazione pratica:
Passaggio 1: utilizzare punti di interruzione e query multimediali con l'utilità 'break-after'.
Crea un programma HTML e specifica valori e stili diversi per dimensioni dello schermo diverse con l'utilità 'break-after'. Ad esempio, abbiamo utilizzato il ' md ” punto di rottura con il “ interruzione dopo colonna ” utilità e “ LG ” punto di rottura con il “ rompere dopo evitare ' utilità:
< corpo >
< div classe = 'colonne-2 bg-teal-400' >
< P classe = 'md:interruzione-dopo-colonna lg:interruzione-dopo-evita' > Ciao... < / P >
< P > Benvenuto qui... < / P >
< P > Ulteriori informazioni su Tailwind CSS... < / P >
< P > È un framework CSS... < / P >
< P > Ciao... < / P >
< / div >
< / corpo >
Qui:
- IL ' md:break-dopo-colonna ” indica che un'interruzione di colonna deve verificarsi dopo questo specifico elemento
in corrispondenza di “ md ” punto di interruzione (dimensioni dello schermo medie).
- IL ' lg:break-after-evita ” class suggerisce che l'elemento dovrebbe evitare break-after al “ LG ” punto di interruzione (dimensioni dello schermo di grandi dimensioni).
Passaggio 2: verificare l'output
Verificare se i punti di interruzione e le query multimediali sono stati applicati visualizzando la pagina Web HTML:
Nella pagina Web di cui sopra, l'interruzione di colonna si è verificata sull'elemento specificato sullo schermo medio e l'interruzione dopo è stata evitata sullo schermo grande.
Conclusione
Per utilizzare il 'break-after' con punti di interruzione e media query in Tailwind, crea innanzitutto un file HTML. Quindi, utilizzare i punti di interruzione e le query multimediali con l'utilità 'break-after' specificando valori e stili diversi per le diverse dimensioni dello schermo. Per la verifica, eseguire il programma HTML e visualizzare la pagina web. Questo articolo ha dimostrato il metodo per utilizzare il 'break-after' con breakpoint e media query in Tailwind CSS.