Ta članek bo razložil, kako uporabiti prelomno točko in medijsko poizvedbo v povezavi z lastnostjo položaja v Tailwindu.
Kako uporabiti prelomne točke in medijske poizvedbe z lastnostjo položaja?
Prelomne točke so ključni bloki za ustvarjanje končnega odzivnega dizajna. Uporablja se za prilagajanje postavitve različnim velikostim zaslona. Medijske poizvedbe se uporabljajo za uporabo določenih slogov za elemente glede na ločljivost zaslona. Atribut položaja lahko uporabite v povezavi s temi, da naredite izhod bolj optimiziran.
1. korak: Uporaba lastnosti položaja z mejnimi točkami in predstavnostnimi poizvedbami
V tem koraku je vstavljen program za uporabo lastnosti položaja vzdolž prelomnih točk ali medijskih poizvedb nad izbranimi ' str ” element:
< telo razred = 'bg-skrilavec-500' >
< div razred = 'text-yellow-300 p-4 lg:p-8' >
< str razred = 'relativni md:absolutni md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:statični lg:translate-x-4 lg:translate-y-4 ' > To besedilo bo imelo različne velikosti pisave glede na velikost zaslona. Na majhnih zaslonih bo manjši, na srednjih srednje velik, na velikih pa večji. < / str >
< / div >
< / telo >
V tej kodi:
- “ bg-skrilavec-500 ” nastavi barvo ozadja na sivo.
- “ besedilo-rumena-300 ” spremeni barvo besedila v rumeno.
- “ p-4 ” doda odmik 4 slikovnih pik.
- “ lg: p-8' doda odmik 8 slikovnih pik na velikih zaslonih.
- Začetni položaj je nastavljen glede na nadrejeno stran z uporabo ' relativno ” razred.
- “ md:besedilo-lg ” naredi besedilo veliko na srednje velikem zaslonu.
- 'md: absolutno' spremeni položaj besedila iz relativnega v absolutni na srednje velikem zaslonu.
- “ md:translate-x-4' in “md:translate-y-4” premaknite besedilo za 4 slikovne pike navzdol in v desno na srednje velikem zaslonu.
- “ lg:besedilo-xl ” spremeni velikost besedila v zelo veliko na velikem zaslonu.
- “ lg:statičen ” spremeni položaj besedila glede na nadrejeno stran iz absolutnega v statičen na velikem zaslonu
- “ lg:translate-x-4 « in » lg:translate-y-4 ” premaknite besedilo za 4 slikovne pike navzdol in v desno na velikem zaslonu.
2. korak: Preverite izhod
Predoglejte si spletno stran, ustvarjeno z zgornjo kodo, in prilagodite velikost zaslona, da vidite spremembo kot:
Vidimo lahko, da se besedilo odzivno obnaša na srednjih in velikih velikostih zaslona.
Zaključek
Za uporabo prelomnih točk in medijskih poizvedb v Tailwindu uporabite prekinitveno točko in nastavite medijsko poizvedbo za vsako prelomno točko ter spremenite tudi lastnost položaja na različnih prelomnih točkah zaslona. Privzete razčlenitve so ' sm ', ' md ', ' lg «, in » xl ”. Ta spletni dnevnik je pokazal, kako uporabiti prelomno točko in medijsko poizvedbo z lastnostjo položaja v Tailwindu.