Tento článok vysvetlí, ako používať bod prerušenia a mediálny dopyt v spojení s vlastnosťou position v Tailwinde.
Ako využiť body prerušenia a mediálne dotazy s vlastnosťou pozície?
Body zlomu sú základnými blokmi pre vytvorenie dokonalého responzívneho dizajnu. Používa sa na prispôsobenie rozloženia rôznym veľkostiam obrazovky. Dotazy na médiá sa používajú na aplikovanie špecifikovaných štýlov na prvky v závislosti od rozlíšenia obrazovky. Atribút polohy možno použiť v spojení s nimi, aby bol výstup optimalizovanejší.
Krok 1: Použitie vlastnosti pozície s bodmi prerušenia a mediálnymi dopytmi
V tomto kroku sa program vloží, aby použil vlastnosť pozície pozdĺž bodov prerušenia alebo mediálnych dopytov nad vybratým p ' element:
< telo trieda = 'bg-slate-500' >
< div trieda = 'text-yellow-300 p-4 lg:p-8' >
< p trieda = 'relatívne md:absolútne md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Tento text bude mať rôzne veľkosti písma v závislosti od veľkosti obrazovky. Na malých obrazovkách bude menší, na stredných obrazovkách stredný a väčší na veľkých obrazovkách. < / p >
< / div >
< / telo >
V tomto kóde:
- “ bg-slate-500 ” nastaví farbu pozadia na sivú.
- “ text-žltý-300 ” zmení farbu textu na žltú.
- “ p-4 “ pridáva výplň 4px.
- “ lg: p-8” pridáva výplň 8px na veľkých obrazovkách.
- Počiatočná pozícia sa nastaví vzhľadom na nadradenú stránku pomocou „ príbuzný ' trieda.
- “ md:text-lg ” zväčší text na stredne veľkej obrazovke.
- 'md:absolutne' upravuje polohu textu z relatívnej na absolútnu na stredne veľkej obrazovke.
- “ md:translate-x-4” a 'md:translate-y-4' posuňte text o 4 pixely nadol a doprava na strednej veľkosti obrazovky.
- “ lg:text-xl ” zmení veľkosť textu na extra veľký na veľkej obrazovke.
- “ lg:statický ” zmení polohu textu vzhľadom na nadradenú stranu z absolútnej na statickú na veľkej obrazovke
- “ lg:translate-x-4 “ a „ lg:translate-y-4 ” posuňte text o 4 pixely nadol a doprava na veľkej obrazovke.
Krok 2: Overte výstup
Ukážte webovú stránku vytvorenú vyššie uvedeným kódom a upravte veľkosť obrazovky, aby ste videli zmenu ako:
Je vidieť, že text vykazuje citlivé správanie na stredných a veľkých obrazovkách.
Záver
Ak chcete použiť body prerušenia a mediálne dotazy v Tailwinde, použite bod prerušenia a nastavte mediálny dotaz na každý bod prerušenia a tiež zmeňte vlastnosť pozície v rôznych bodoch prerušenia na obrazovke. Predvolené členenia sú „ sm ',' md ',' lg “ a „ xl “. Tento blog ukázal, ako používať bod prerušenia a mediálny dopyt s vlastnosťou pozície v Tailwinde.