Tento článek vysvětlí, jak používat bod přerušení a dotaz na média ve spojení s vlastností position v Tailwindu.
Jak využít zlomové body a mediální dotazy s vlastností pozice?
Body zlomu jsou základní bloky pro vytvoření dokonalého responzivního designu. Používá se k přizpůsobení rozvržení různým velikostem obrazovky. Dotazy na média se používají k aplikaci specifikovaných stylů na prvky v závislosti na rozlišení obrazovky. Atribut pozice lze použít ve spojení s těmito vlastnostmi, aby byl výstup optimalizován.
Krok 1: Použití vlastnosti pozice s body přerušení a dotazy na média
V tomto kroku se vloží program, aby použil vlastnost position podél bodů přerušení nebo dotazů na média nad vybraným p prvek:
< tělo třída = 'bg-slate-500' >
< div třída = 'text-yellow-300 p-4 lg:p-8' >
< p třída = 'relativní md:absolutní 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 mít různé velikosti písma podle velikosti obrazovky. Na malých obrazovkách bude menší, na středních středně velký a na velkých větší. < / p >
< / div >
< / tělo >
V tomto kódu:
- “ bg-břidlice-500 ” nastaví barvu pozadí na šedou.
- “ text-žlutý-300 ” změní barvu textu na žlutou.
- “ p-4 “ přidává odsazení 4px.
- “ lg: p-8” přidává výplň 8px na velkých obrazovkách.
- Počáteční pozice se nastaví vzhledem k nadřazené stránce pomocí „ relativní “třída.
- “ md:text-lg ” zvětší text na středně velké obrazovce.
- 'md:absolutní' upravuje polohu textu z relativní na absolutní na středně velké obrazovce.
- “ md:translate-x-4” a 'md:translate-y-4' posuňte text o 4 pixely dolů a doprava na střední velikosti obrazovky.
- “ lg:text-xl ” změní velikost textu na extra velký na velké obrazovce.
- “ lg:statický ” změní polohu textu vzhledem k nadřazené stránce z absolutní na statickou na velké obrazovce
- “ lg:translate-x-4 ' a ' lg:translate-y-4 ” posuňte text o 4 pixely dolů a doprava na velké obrazovce.
Krok 2: Ověřte výstup
Prohlédněte si webovou stránku vytvořenou výše uvedeným kódem a upravte velikost obrazovky, abyste viděli změnu jako:
Je vidět, že text vykazuje citlivé chování na střední a velké obrazovce.
Závěr
Chcete-li v Tailwindu používat body přerušení a dotazy na média, použijte bod přerušení a nastavte dotaz na média pro každý bod přerušení a také změňte vlastnost pozice v různých bodech přerušení na obrazovce. Výchozí rozdělení jsou „ sm ',' md ',' lg ', a ' xl “. Tento blog ukazuje, jak používat bod přerušení a dotaz na média s vlastností pozice v Tailwindu.