Den här bloggen kommer att demonstrera processen för att tillämpa mediefrågor och brytpunkter med hjälp av overscroll-verktyget i Tailwind.
Hur applicerar man mediafrågor och brytpunkter med Overscroll i medvind?
För att tillämpa brytpunkterna eller dess andra namn mediefrågor när det gäller CSS med ' överrulla ' verktyg. HTML-programmet skapas och tillämpar de olika brytpunkterna ' sm ', ' md ' eller ' lg ” med lämpliga verktygsklasser från verktyget “overscroll”. Det ändrar rullningsbeteendet för objekt på olika skärmstorlekar.
Steg 1: Använd Breakpoints och Media Queries i HTML-koden
Skapa ett HTML-dokument och tillämpa brytpunkterna som är skärmstorlekarna och mediefrågorna för varje brytpunkt. Till exempel ' md ' och ' lg ” brytpunkter används i koden nedan för textstorlek och överrullningsbeteende tillämpas på den:
< kropp klass = 'bg-slate-500' >
< div klass = 'text-röd-900 p-4 lg:p-8' >
< sid klass = '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 ' > Den här texten kommer att ha olika teckenstorlekar baserat på skärmstorleken. Det kommer att vara mindre på små skärmar , medium - storlek på medelstora skärmar , och större på stora skärmar. sid >
div >
kropp >
I denna kod:
- ' bg-slate-500 ” ställer in bakgrundsfärgen till grå.
- ' text-röd-900 ” ändrar textfärgen till röd.
- ' p-4 ” lägger till en utfyllnad på 4px.
- ' lg: p-8 ” lägger till en stoppning på 8px på stora skärmar.
- Den ursprungliga positionen för ' '-taggen ställs in i förhållande till den överordnade sidan genom att använda ' relativ ' klass.
- ' md:absolut ” ändra textens position från relativ till absolut på en medelstor skärm.
- ' md:overscroll-contain ' säkerställer att 'överrullnings'-beteendet finns i det elementet istället för att påverka hela sidan när skärmen är medelstor.
- ' md:text-lg ” gör texten stor på en medelstor skärm.
- ' md:translate-x-4 ' och ' md:translate-y-4 'flytta texten' 4px ” ner och till höger på medelstor skärmstorlek.
- ' lg:overscroll-ingen ' ställer in ' överrulla ” klass egenskap till ingen på en stor skärm.
- ' lg:text-xl ” ändrar textstorleken till extra stor för en stor skärm.
- ' lg:statisk ” ändrar textens position i förhållande till den överordnade sidan från absolut till statisk för en stor skärm
- ' lg:translate-x-4 ' och ' lg:translate-y-4 ” flytta texten 4px nedåt och till höger på stor skärmstorlek.
Steg 2: Förhandsgranska utdata
Förhandsgranska nu webbsidan som skapats genom att köra HTML-koden ovan och ändra skärmstorleken på HTML-webbplatsen för att se synliga ändringar:
På skärmen ovan visas ' överrulla ” beteende är synligt och genom att minska skärmstorleken kan det ses att textstorleken ändras genom mediefrågorna som tillämpas på den.
Slutsats
För att tillämpa mediafrågor och brytpunkter med ' överrulla ”, ange brytpunkterna med någon önskad klass från verktyget ”overscroll”. Genom att variera skärmstorleken justerar mediefrågorna skärmens utdata. Den här bloggen har demonstrerat processen att tillämpa mediafrågor och brytpunkter med 'overscroll'-beteende i Tailwind.