Deze blog demonstreert het proces van het toepassen van mediaquery's en breekpunten met behulp van het overscroll-hulpprogramma in Tailwind.
Hoe pas ik mediaquery's en breekpunten toe met Overscroll in Tailwind?
Om de breekpunten of de andere naam mediaquery's toe te passen als het gaat om CSS met de ' overscroll ' nutsvoorziening. Het HTML-programma is gemaakt en past de verschillende breekpunten toe “ sm ', ' md ' of ' LG ” met de geschikte nutsklassen van het hulpprogramma “overscroll”. Het verandert het scrollgedrag van items op verschillende schermformaten.
Stap 1: Gebruik de breekpunten en mediaquery's in de HTML-code
Maak een HTML-document en pas de breekpunten toe, dit zijn de schermformaten en mediaquery's voor elk breekpunt. Bijvoorbeeld ' md ' En ' LG 'Breekpunten worden in de onderstaande code gebruikt voor de tekstgrootte en er wordt overscroll-gedrag op toegepast:
< lichaam klas = 'bg-leisteen-500' >
< div klas = 'tekst-rood-900 p-4 lg:p-8' >
< P klas = 'relatieve md:absoluut md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:statisch lg:translate-x-4 lg :vertaal-y-4 ' > Deze tekst heeft verschillende lettergroottes, afhankelijk van de schermgrootte. Het zal kleiner zijn op kleine schermen , medium - formaat op middelgrote schermen , en groter op grote schermen. P >
div >
lichaam >
In deze code:
- “ bg-leisteen-500 ” stelt de achtergrondkleur in op grijs.
- “ tekst-rood-900 ” verandert de tekstkleur in rood.
- “ p-4 'voegt een opvulling van 4px toe.
- “ LG: p-8 ”Voegt een opvulling van 8px toe op grote schermen.
- De initiële positie van de “ De tag ' wordt relatief ten opzichte van de bovenliggende pagina ingesteld met behulp van de ' familielid ' klas.
- “ MD: absoluut ” verander de positie van tekst van relatief naar absoluut op een middelgroot scherm.
- “ md:overscroll-contain ' zorgt ervoor dat het 'overscroll'-gedrag binnen dat element wordt gehouden in plaats van dat dit de hele pagina beïnvloedt wanneer het scherm middelgroot is.
- “ md: tekst-lg ” maakt de tekst groot op een middelgroot scherm.
- “ md: vertalen-x-4 ' En ' md:vertaal-y-4 'verplaats de tekst' 4px ” naar beneden en naar rechts op middelgroot schermformaat.
- “ lg:overscroll-none ” stelt de “ overscroll ”klasse eigendom voor niemand op een groot scherm.
- “ lg:tekst-xl ” wijzigt de tekstgrootte naar extra groot voor een groot scherm.
- “ lg: statisch ” verandert de positie van de tekst ten opzichte van de bovenliggende pagina van absoluut naar statisch voor een groot scherm
- “ lg: vertalen-x-4 ' En ' lg:vertaal-y-4 Verplaats de tekst 4px naar beneden en naar rechts op groot schermformaat.
Stap 2: Bekijk een voorbeeld van de uitvoer
Bekijk nu een voorbeeld van de webpagina die is gemaakt door de bovenstaande HTML-code uit te voeren en wijzig de schermgrootte van de HTML-site om zichtbare wijzigingen te zien:
In het bovenstaande scherm verschijnt de “ overscroll '-gedrag is zichtbaar en door de schermgrootte te verkleinen is te zien dat de tekstgrootte verandert door de mediaquery's die erop worden toegepast.
Conclusie
Om de mediaquery's en breekpunten toe te passen met de ' overscroll ” specificeert u de breekpunten met een gewenste klasse uit het hulpprogramma “overscroll”. Door de schermgrootte te variëren, passen de mediaquery's de uitvoer van het scherm aan. Deze blog heeft het proces gedemonstreerd van het toepassen van de mediaquery's en breekpunten met 'overscroll'-gedrag in Tailwind.