In dit artikel wordt uitgelegd hoe u het breekpunt en de mediaquery gebruikt in combinatie met de eigenschap position in Tailwind.
Hoe kunt u breekpunten en mediaquery's gebruiken met positie-eigenschap?
Breekpunten zijn de kernblokken voor het creëren van een ultiem responsief ontwerp. Het wordt gebruikt om de lay-out aan te passen aan verschillende schermformaten. Mediaquery's worden gebruikt om specifieke stijlen op elementen toe te passen, afhankelijk van de schermresolutie. Het position attribuut kan in combinatie hiermee worden toegepast om de uitvoer geoptimaliseerd te maken.
Stap 1: De eigenschap Position toepassen met breekpunten en mediaquery's
In deze stap wordt het programma ingevoegd om de eigenschap position toe te passen langs de breekpunten of mediaquery's over de geselecteerde ' P ”element:
< lichaam klas = 'bg-leisteen-500' >
< div klas = 'tekst-geel-300 p-4 lg:p-8' >
< P klas = 'relatieve md:absoluut md:tekst-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:statisch lg:translate-x-4 lg:translate-y-4 ' > Deze tekst heeft verschillende lettergroottes, afhankelijk van de schermgrootte. Het zal kleiner zijn op kleine schermen, middelgroot op middelgrote schermen en groter op grote schermen. < / P >
< / div >
< / lichaam >
In deze code:
- “ bg-leisteen-500 ” stelt de achtergrondkleur in op grijs.
- “ tekst-geel-300 ” verandert de tekstkleur in geel.
- “ p-4 'voegt een opvulling van 4px toe.
- “ LG: p-8' voegt een opvulling van 8px toe op grote schermen.
- De beginpositie wordt ingesteld ten opzichte van de bovenliggende pagina met behulp van de “ familielid ' klas.
- “ md: tekst-lg ” maakt de tekst groot op een middelgroot scherm.
- “md:absoluut” wijzigt de positie van tekst van relatief naar absoluut op een middelgroot scherm.
- “ md:vertaal-x-4” En “md:vertaal-y-4” verplaats de tekst 4px naar beneden en naar rechts op een middelgroot schermformaat.
- “ lg:tekst-xl ” verandert de tekstgrootte naar extra groot op een groot scherm.
- “ lg: statisch ” verandert de positie van tekst ten opzichte van de bovenliggende pagina van absoluut naar statisch op een groot scherm
- “ lg: vertalen-x-4 ' En ' lg:vertaal-y-4 Verplaats de tekst 4px naar beneden en naar rechts op een groot schermformaat.
Stap 2: Controleer de uitvoer
Bekijk een voorbeeld van de webpagina die met de bovenstaande code is gemaakt en pas de schermgrootte aan om de wijziging als volgt te zien:
Het is te zien dat tekst responsief gedrag vertoont op middelgrote en grote schermformaten.
Conclusie
Als u breekpunten en mediaquery's in Tailwind wilt gebruiken, past u het breekpunt toe en stelt u de mediaquery in op elk breekpunt, en wijzigt u ook de positie-eigenschap op verschillende breekpunten van het scherm. De standaarduitsplitsingen zijn “ sm ', ' md ', ' LG ', En ' xl ”. Deze blog heeft laten zien hoe je het breekpunt en de mediaquery met position-eigenschap in Tailwind kunt gebruiken.