Denne artikel vil forklare, hvordan du bruger pausepunktet og medieforespørgslen i forbindelse med positionsegenskaben i Tailwind.
Hvordan udnytter man brudpunkter og medieforespørgsler med positionsegenskab?
Breakpoints er kerneblokkene for at skabe et ultimativt responsivt design. Det bruges til at gøre layoutet tilpasset til forskellige skærmstørrelser. Medieforespørgsler bruges til at anvende specificerede stilarter på elementer afhængigt af skærmopløsning. Positionsattributten kan anvendes sammen med disse for at gøre output mere optimeret.
Trin 1: Anvendelse af positionsegenskaben med brudpunkter og medieforespørgsler
I dette trin indsættes programmet for at anvende positionsegenskaben langs brudpunkterne eller medieforespørgsler over det valgte ' s ' element:
< legeme 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 tekst vil have forskellige skriftstørrelser baseret på skærmstørrelsen. Det bliver mindre på små skærme, mellemstort på mellemstore skærme og større på store skærme. < / s >
< / div >
< / legeme >
I denne kode:
- “ bg-slate-500 ” indstiller baggrundsfarven til grå.
- “ tekst-gul-300 ” ændrer tekstfarven til gul.
- “ s-4 ” tilføjer en polstring på 4px.
- “ lg: p-8' tilføjer en polstring på 8px på store skærme.
- Startpositionen indstilles i forhold til den overordnede side ved at bruge ' i forhold ' klasse.
- “ md:tekst-lg ” gør teksten stor på en mellemstor skærm.
- 'md:absolut' ændrer tekstens position fra relativ til absolut på en mellemstor skærm.
- “ md:translate-x-4' og 'md:translate-y-4' flyt teksten 4px ned og til højre på medium skærmstørrelse.
- “ lg:text-xl ” ændrer tekststørrelsen til ekstra stor på en stor skærm.
- “ lg:statisk ” ændrer tekstens position i forhold til den overordnede side fra absolut til statisk på en stor skærm
- “ lg:translate-x-4 ' og ' lg:translate-y-4 ” flytte teksten 4px ned og til højre på en stor skærmstørrelse.
Trin 2: Bekræft outputtet
Se en forhåndsvisning af websiden oprettet af koden ovenfor, og juster skærmstørrelsen for at se ændringen som:
Det kan ses, at tekst viser responsiv adfærd på mellemstore og store skærmstørrelser.
Konklusion
For at bruge brudpunkter og medieforespørgsler i Tailwind skal du anvende brudpunktet og indstille medieforespørgslen til hvert brudpunkt, og også ændre positionsegenskaben ved forskellige brudpunkter på skærmen. Standardopdelingerne er ' sm ', ' md ', ' lg ', og ' xl ”. Denne blog har vist, hvordan man bruger breakpoint og medieforespørgsel med positionsegenskab i Tailwind.