Denne blog vil demonstrere processen med at anvende medieforespørgsler og breakpoints ved hjælp af overscroll-værktøjet i Tailwind.
Hvordan anvender man medieforespørgsler og brudpunkter med Overscroll i medvind?
For at anvende brudpunkterne eller dets andre navnemedieforespørgsler, når det kommer til CSS med ' overrulle ' nytte. HTML-programmet oprettes og anvender de forskellige brudpunkter ' sm ', ' md ' eller ' lg ” med de passende værktøjsklasser fra værktøjet ”overscroll”. Det ændrer rulleadfærden for elementer på forskellige skærmstørrelser.
Trin 1: Brug Breakpoints og Media Queries i HTML-koden
Opret et HTML-dokument og anvend brudpunkterne, som er skærmstørrelserne og medieforespørgslerne for hvert brudpunkt. For eksempel ' md ' og ' lg ” brudpunkter bruges i nedenstående kode til tekststørrelse, og der anvendes overscroll-adfærd på den:
< legeme klasse = 'bg-slate-500' >
< div klasse = 'tekst-rød-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 tekst vil have forskellige skriftstørrelser baseret på skærmstørrelsen. Det vil være mindre på små skærme , medium - størrelse 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-rød-900 ” ændrer tekstfarven til rød.
- “ s-4 ” tilføjer en polstring på 4px.
- “ lg: p-8 ” tilføjer en polstring på 8px på store skærme.
- Startpositionen for ' '-tagget indstilles i forhold til den overordnede side ved at bruge ' i forhold ' klasse.
- “ md: absolut ” ændre tekstens position fra relativ til absolut på en mellemstor skærm.
- “ md:overscroll-contain ” sikrer, at “overscroll”-adfærden er indeholdt i dette element i stedet for at påvirke hele siden, når skærmen er mellemstor.
- “ md:tekst-lg ” gør teksten stor 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:overscroll-ingen ' indstiller ' overrulle ” klasse ejendom til ingen på en stor skærm.
- “ lg:text-xl ” ændrer tekststørrelsen til ekstra stor for en stor skærm.
- “ lg:statisk ” ændrer tekstens position i forhold til den overordnede side fra absolut til statisk for en stor skærm
- “ lg:translate-x-4 ' og ' lg:translate-y-4 ” Flyt teksten 4px ned og til højre på stor skærmstørrelse.
Trin 2: Se et eksempel på outputtet
Se nu et eksempel på den webside, der er oprettet ved at udføre ovenstående HTML-kode, og skift HTML-webstedets skærmstørrelse for at se synlige ændringer:
I ovenstående skærmbillede vises ' overrulle ”-adfærd er synlig, og ved at formindske skærmstørrelsen kan det ses, at tekststørrelsen ændres af de medieforespørgsler, der anvendes på den.
Konklusion
For at anvende medieforespørgsler og brudpunkter med ' overrulle ”-værktøjet, skal du angive brudpunkterne med en ønsket klasse fra værktøjet 'overscroll'. Ved at variere skærmstørrelsen justerer medieforespørgslerne skærmens output. Denne blog har demonstreret processen med at anvende medieforespørgsler og brudpunkter med 'overscroll'-adfærd i Tailwind.