Questo articolo illustrerà il metodo per utilizzare i punti di interruzione reattivi in Tailwind CSS.
Come utilizzare i punti di interruzione reattivi in Tailwind?
Per utilizzare punti di interruzione reattivi in Tailwind, utilizza i modificatori reattivi, come ' sm ”, “ md ”, “ LG ”, “ XL ' E ' 2xl ” con le altre classi nel programma HTML. Quindi, visualizzare la pagina Web HTML e modificare le dimensioni dello schermo per assicurarsi che i punti di interruzione funzionino correttamente.
Passaggio 1: utilizzare i modificatori reattivi nel programma HTML
Crea un programma HTML e utilizza i modificatori reattivi con lo stile desiderato. Ad esempio, abbiamo utilizzato il ' sm ”, “ md ”, “ LG ”, “ XL ' E ' 2xl ' modificatori reattivi:
< corpo >
< div classe = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 classe = 'text-7xl text-white text-center p-20' > Suggerimento Linux < / h1 >
< / div >
< / corpo >
Qui:
- “ bg-fucsia-400 ” imposta il colore di sfondo del file al fucsia.
- “ sm:bg-rosa-600 La classe ” applica il colore rosa allo sfondo per i piccoli schermi.
- “ md:bg-verde-700 La classe ” cambia il colore di sfondo in verde sugli schermi medi.
- “ lg:bg-viola-50 ” class imposta il colore di sfondo su viola per schermi di grandi dimensioni.
- “ xl:bg-verde acqua-600 La classe applica il colore verde acqua allo sfondo per schermi extra-large.
- “ 2xl:bg-giallo-500 La classe ” cambia il colore di sfondo in giallo sugli schermi 2xl.
Passaggio 2: verificare l'output
Visualizza la pagina Web HTML per verificare se i punti di interruzione reattivi funzionano correttamente o meno:
Nella pagina Web di cui sopra, si può osservare che il colore della pagina Web cambia con la dimensione dello schermo in base alla quale sono stati specificati i punti di interruzione.
Conclusione
Per utilizzare punti di interruzione reattivi in Tailwind, utilizza i modificatori reattivi, come ' sm ”, “ md ”, “ LG ”, “ XL ' E ' 2xl ” con le altre classi nel programma HTML. Questi modificatori vengono utilizzati per applicare stili diversi a un particolare elemento in base alle dimensioni dello schermo. Questo articolo ha esemplificato il metodo per utilizzare i punti di interruzione reattivi in Tailwind CSS.