Aquest escrit il·lustrarà el mètode per utilitzar els punts d'interrupció de resposta a Tailwind CSS.
Com utilitzar els punts d'interrupció de resposta a Tailwind?
Per utilitzar punts d'interrupció de resposta a Tailwind, utilitzeu els modificadors de resposta, com ara ' sm ”, “ md ”, “ lg ”, “ xl ' i ' 2xl ” amb les altres classes del programa HTML. A continuació, visualitzeu la pàgina web HTML i canvieu la mida de la pantalla per assegurar-vos que els punts d'interrupció funcionin correctament.
Pas 1: utilitzeu modificadors de resposta al programa HTML
Feu un programa HTML i utilitzeu els modificadors responsius amb l'estil desitjat. Per exemple, hem utilitzat el ' sm ”, “ md ”, “ lg ”, “ xl ' i ' 2xl ” modificadors de resposta:
< cos >
< div classe = 'H-screen bg-fuchsia-400 sm:bg-rosa-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 classe = 'text-7xl text-text blanc centre-text p-20' > Pista de Linux < / h1 >
< / div >
< / cos >
Aquí:
- “ bg-fúcsia-400 ” classe estableix el color de fons de la al fúcsia.
- “ sm:bg-rosa-600 ”La classe aplica color rosa al fons per a pantalles petites.
- “ md:bg-green-700 ” la classe canvia el color de fons a verd a les pantalles mitjanes.
- “ lg:bg-violat-50 ”La classe estableix el color de fons en violeta per a pantalles grans.
- “ xl:bg-teal-600 ”La classe aplica color verd verd al fons per a pantalles molt grans.
- “ 2xl: bg-groc-500 ”La classe canvia el color de fons a groc a les pantalles 2xl.
Pas 2: verifiqueu la sortida
Consulteu la pàgina web HTML per verificar si els punts d'interrupció responsius funcionen correctament o no:
A la pàgina web anterior, es pot observar que el color de la pàgina web està canviant amb la mida de la pantalla segons la qual s'han especificat els punts d'interrupció.
Conclusió
Per utilitzar punts d'interrupció de resposta a Tailwind, utilitzeu els modificadors de resposta, com ara ' sm ”, “ md ”, “ lg ”, “ xl ' i ' 2xl ” amb les altres classes del programa HTML. Aquests modificadors s'utilitzen per aplicar diferents estils a un element determinat en funció de la mida de la pantalla. Aquest escrit ha exemplificat el mètode per utilitzar els punts d'interrupció sensibles a Tailwind CSS.