Dit artikel illustreert de methode om de responsieve breekpunten in Tailwind CSS te gebruiken.
Hoe gebruik je responsieve breekpunten in Tailwind?
Om responsieve breekpunten in Tailwind te gebruiken, gebruikt u de responsieve modifiers, zoals ' sm ”, “ md ”, “ lg ”, “ xl ' En ' 2xl ” met de andere klassen in het HTML-programma. Bekijk vervolgens de HTML-webpagina en wijzig de schermgrootte om ervoor te zorgen dat de breekpunten correct werken.
Stap 1: gebruik responsieve modifiers in HTML-programma
Maak een HTML-programma en gebruik de responsieve modifiers met de gewenste styling. We hebben bijvoorbeeld de ' sm ”, “ md ”, “ lg ”, “ xl ' En ' 2xl ” responsieve modifiers:
< lichaam >
< div klas = 'h-scherm bg-fuchsia-400 sm:bg-roze-600 md:bg-groen-700 lg:bg-paars-500 xl:bg-teal-600 2xl:bg-geel-500' >
< h1 klas = 'tekst-7xl tekst-wit tekst-center p-20' > Linux-tip < / h1 >
< / div >
< / lichaam >
Hier:
- “ bg-fuchsia-400 ” klasse bepaalt de achtergrondkleur van de naar fuchsia.
- “ sm:bg-roze-600 ” class past roze kleur toe op de achtergrond voor kleine schermen.
- “ md:bg-groen-700 ” class verandert de achtergrondkleur in groen op middelgrote schermen.
- “ lg:bg-paars-50 ” class stelt de achtergrondkleur in op paars voor grote schermen.
- “ xl:bg-groenblauw-600 ” class past groenblauw toe op de achtergrond voor extra grote schermen.
- “ 2xl:bg-geel-500 ” class verandert de achtergrondkleur in geel op 2xl-schermen.
Stap 2: uitvoer verifiëren
Bekijk de HTML-webpagina om te controleren of de responsieve breekpunten correct werken of niet:
Op de bovenstaande webpagina is te zien dat de kleur van de webpagina verandert met de schermgrootte volgens welke de breekpunten zijn gespecificeerd.
Conclusie
Om responsieve breekpunten in Tailwind te gebruiken, gebruikt u de responsieve modifiers, zoals ' sm ”, “ md ”, “ lg ”, “ xl ' En ' 2xl ” met de andere klassen in het HTML-programma. Deze modifiers worden gebruikt om verschillende stijlen toe te passen op een bepaald element op basis van de schermgrootte. Dit artikel is een voorbeeld van de methode om de responsieve breekpunten in Tailwind CSS te gebruiken.