Denne artikkelen vil forklare hvordan du bruker bruddpunktet og mediespørringen i forbindelse med posisjonsegenskapen i Tailwind.
Hvordan utnytte bruddpunkter og medieforespørsler med posisjonseiendom?
Knekkpunkter er kjerneblokkene for å skape en ultimat responsiv design. Den brukes til å gjøre oppsettet tilpasset forskjellige skjermstørrelser. Mediespørringer brukes til å bruke spesifiserte stiler på elementer avhengig av skjermoppløsning. Posisjonsattributtet kan brukes sammen med disse for å gjøre utgangen mer optimalisert.
Trinn 1: Bruk av posisjonsegenskapen med bruddpunkter og mediespørringer
I dette trinnet settes programmet inn for å bruke posisjonsegenskapen langs bruddpunktene eller mediespørringene over den valgte ' s ' element:
< kropp klasse = 'bg-slate-500' >
< div klasse = 'tekst-gul-300 p-4 lg:p-8' >
< s klasse = 'relative md:absolute md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Denne teksten vil ha forskjellige skriftstørrelser basert på skjermstørrelsen. Den blir mindre på små skjermer, mellomstor på mellomstore skjermer og større på store skjermer. < / s >
< / div >
< / kropp >
I denne koden:
- ' bg-slate-500 ” setter bakgrunnsfargen til grå.
- ' tekst-gul-300 ” endrer tekstfargen til gul.
- ' s-4 ” legger til en polstring på 4px.
- ' lg: p-8' legger til en polstring på 8px på store skjermer.
- Startposisjonen settes i forhold til den overordnede siden ved å bruke ' slektning ' klasse.
- ' md:tekst-lg ” gjør teksten stor på en mellomstor skjerm.
- 'md:absolutt' endrer plasseringen av tekst fra relativ til absolutt på en mellomstor skjerm.
- ' md:translate-x-4' og «md:translate-y-4» flytt teksten 4px ned og til høyre på middels skjermstørrelse.
- ' lg:text-xl ” endrer tekststørrelsen til ekstra stor på en stor skjerm.
- ' lg:statisk ” endrer posisjonen til teksten i forhold til den overordnede siden fra absolutt til statisk på en stor skjerm
- ' lg:translate-x-4 ' og ' lg:translate-y-4 ” flytt teksten 4px ned og til høyre på en stor skjermstørrelse.
Trinn 2: Bekreft utdata
Forhåndsvis nettsiden opprettet av koden ovenfor og juster skjermstørrelsen for å se endringen som:
Det kan sees at tekst viser responsiv oppførsel på mellomstore og store skjermstørrelser.
Konklusjon
For å bruke bruddpunkter og mediespørringer i Tailwind, bruk bruddpunktet og angi mediespørringen på hvert bruddpunkt, og endre også posisjonsegenskapen ved forskjellige bruddpunkter på skjermen. Standardoppdelingene er ' sm ', ' md ', ' lg ', og ' xl '. Denne bloggen har vist hvordan du bruker bruddpunktet og mediespørringen med posisjonsegenskap i Tailwind.