Denne opskrivning vil illustrere metoden til at bruge de responsive breakpoints i Tailwind CSS.
Hvordan bruger man responsive brudpunkter i medvind?
For at bruge responsive breakpoints i Tailwind skal du bruge de responsive modifikatorer, såsom ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ” med de andre klasser i HTML-programmet. Se derefter HTML-websiden og skift skærmstørrelsen for at sikre, at brudpunkterne fungerer korrekt.
Trin 1: Brug Responsive Modifiers i HTML-programmet
Lav et HTML-program og brug de responsive modifikatorer med den ønskede stil. For eksempel har vi brugt ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ' responsive modifikatorer:
< legeme >
< div klasse = 'h-skærm bg-fuchsia-400 sm:bg-pink-600 md:bg-grøn-700 lg:bg-lilla-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 klasse = 'tekst-7xl tekst-hvid tekst-center p-20' > Linux tip < / h1 >
< / div >
< / legeme >
Her:
- “ bg-fuchsia-400 ” klasse indstiller baggrundsfarven for til fuchsia.
- “ sm:bg-pink-600 ” klasse anvender lyserød farve på baggrunden for små skærme.
- “ md:bg-grøn-700 ” klasse ændrer baggrundsfarven til grøn på mellemstore skærme.
- “ lg:bg-lilla-50 ” klasse indstiller baggrundsfarven til lilla for store skærme.
- “ xl:bg-teal-600 ” klasse anvender blågrøn farve på baggrunden for ekstra store skærme.
- “ 2xl:bg-gul-500 ” klasse ændrer baggrundsfarven til gul på 2xl skærme.
Trin 2: Bekræft output
Se HTML-websiden for at kontrollere, om de responsive brudpunkter fungerer korrekt eller ej:
På ovenstående webside kan det observeres, at farven på websiden ændrer sig med den skærmstørrelse, som brudpunkterne blev angivet i henhold til.
Konklusion
For at bruge responsive breakpoints i Tailwind skal du bruge de responsive modifikatorer, såsom ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ” med de andre klasser i HTML-programmet. Disse modifikatorer bruges til at anvende forskellige stilarter til et bestemt element baseret på skærmstørrelsen. Denne opskrivning har eksemplificeret metoden til at bruge de responsive breakpoints i Tailwind CSS.