Denne bloggen vil demonstrere prosessen med å bruke mediespørringer og bruddpunkter ved å bruke overscroll-verktøyet i Tailwind.
Hvordan bruke medieforespørsler og bruddpunkter med Overscroll i medvind?
For å bruke bruddpunktene eller dets andre navn medieforespørsler når det gjelder CSS med ' rulle over ' nytte. HTML-programmet er opprettet og bruker de forskjellige bruddpunktene ' sm ', ' md ' eller ' lg ' med de passende verktøyklassene fra verktøyet 'overscroll'. Det endrer rulleoppførselen til elementer på forskjellige skjermstørrelser.
Trinn 1: Bruk Breakpoints og Media Queries i HTML-koden
Lag et HTML-dokument og bruk bruddpunktene som er skjermstørrelsene og mediespørringene for hvert bruddpunkt. For eksempel ' md ' og ' lg brytepunkter brukes i koden nedenfor for tekststørrelse og overrullingsadferd brukes på den:
< kropp klasse = 'bg-slate-500' >
< div klasse = 'text-red-900 p-4 lg:p-8' >
< s klasse = 'relative md:absolute md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none 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 vil være mindre på små skjermer , medium - størrelse på mellomstore skjermer , og større på store skjermer. s >
div >
kropp >
I denne koden:
- ' bg-slate-500 ” setter bakgrunnsfargen til grå.
- ' tekst-rød-900 ” endrer tekstfargen til rød.
- ' s-4 ” legger til en polstring på 4px.
- ' lg: p-8 ” legger til en polstring på 8px på store skjermer.
- Utgangsposisjonen til ' '-taggen settes i forhold til den overordnede siden ved å bruke ' slektning ' klasse.
- ' md:absolutt endre posisjonen til tekst fra relativ til absolutt på en mellomstor skjerm.
- ' md:overscroll-contain ' sikrer at 'overrulling'-atferden er inneholdt i det elementet i stedet for å påvirke hele siden når skjermen er middels stor.
- ' md:tekst-lg ” gjør teksten stor 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:overscroll-ingen ' setter ' rulle over ” klasse eiendom til ingen på en stor skjerm.
- ' lg:text-xl ” endrer tekststørrelsen til ekstra stor for en stor skjerm.
- ' lg:statisk ” endrer posisjonen til teksten i forhold til den overordnede siden fra absolutt til statisk for en stor skjerm
- ' lg:translate-x-4 ' og ' lg:translate-y-4 Flytt teksten 4px ned og til høyre på stor skjermstørrelse.
Trinn 2: Forhåndsvis utdataene
Nå kan du forhåndsvise nettsiden som er opprettet ved å kjøre HTML-koden ovenfor og endre skjermstørrelsen på HTML-siden for å se synlige endringer:
På skjermen ovenfor vises ' rulle over ”-adferd er synlig, og ved å redusere skjermstørrelsen kan det ses at tekststørrelsen endres av mediespørringene som brukes på den.
Konklusjon
For å bruke mediespørringene og bruddpunktene med ' rulle over '-verktøyet, spesifiser bruddpunktene med en ønsket klasse fra 'overscroll'-verktøyet. Ved å variere skjermstørrelsen justerer mediespørringene resultatet av skjermen. Denne bloggen har demonstrert prosessen med å bruke medieforespørsler og bruddpunkter med «overscroll»-atferd i Tailwind.