Denne oppskriften vil illustrere metoden for å bruke de responsive bruddpunktene i Tailwind CSS.
Hvordan bruke responsive bruddpunkter i medvind?
For å bruke responsive bruddpunkter i Tailwind, bruk de responsive modifikatorene, for eksempel ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ” med de andre klassene i HTML-programmet. Deretter kan du se HTML-nettsiden og endre skjermstørrelsen for å sikre at bruddpunktene fungerer som de skal.
Trinn 1: Bruk responsive modifikatorer i HTML-programmet
Lag et HTML-program og bruk de responsive modifikatorene med ønsket stil. For eksempel har vi brukt ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ' responsive modifikatorer:
< kropp >
< div klasse = 'h-skjerm bg-fuchsia-400 sm:bg-rosa-600 md:bg-grønn-700 lg:bg-lilla-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 klasse = 'tekst-7xl tekst-hvit tekst-senter p-20' > Linux hint < / h1 >
< / div >
< / kropp >
Her:
- ' bg-fuchsia-400 ” klasse setter bakgrunnsfargen til til fuchsia.
- ' sm:bg-rosa-600 ” klasse bruker rosa farge på bakgrunnen for små skjermer.
- ' md:bg-grønn-700 ” klasse endrer bakgrunnsfargen til grønn på mellomstore skjermer.
- ' lg:bg-lilla-50 ” klasse setter bakgrunnsfargen til lilla for store skjermer.
- ' xl:bg-teal-600 ”-klassen bruker blågrønn farge på bakgrunnen for ekstra store skjermer.
- ' 2xl:bg-gul-500 ” klasse endrer bakgrunnsfargen til gul på 2xl-skjermer.
Trinn 2: Bekreft utdata
Se HTML-nettsiden for å bekrefte om de responsive bruddpunktene fungerer som de skal eller ikke:
På nettsiden ovenfor kan det observeres at fargen på nettsiden endrer seg med skjermstørrelsen som bruddpunktene ble spesifisert i henhold til.
Konklusjon
For å bruke responsive bruddpunkter i Tailwind, bruk de responsive modifikatorene, for eksempel ' sm ', ' md ', ' lg ', ' xl ' og ' 2xl ” med de andre klassene i HTML-programmet. Disse modifikatorene brukes til å bruke forskjellige stiler på et bestemt element basert på skjermstørrelsen. Denne oppskriften har eksemplifisert metoden for å bruke de responsive bruddpunktene i Tailwind CSS.