Tento zápis ilustruje metodu použití responzivních zarážek v Tailwind CSS.
Jak používat responzivní zarážky ve službě Tailwind?
Chcete-li v Tailwindu používat responzivní zarážky, použijte responzivní modifikátory, jako je „ sm “, “ md “, “ lg “, “ xl ' a ' 2xl ” s ostatními třídami v programu HTML. Poté si prohlédněte webovou stránku HTML a změňte velikost obrazovky, abyste zajistili, že zarážky fungují správně.
Krok 1: Použijte responzivní modifikátory v programu HTML
Vytvořte HTML program a použijte responzivní modifikátory s požadovaným stylem. Použili jsme například „ sm “, “ md “, “ lg “, “ xl ' a ' 2xl ” responzivní modifikátory:
< tělo >
< div třída = 'h-screen bg-fuchsiová-400 sm:bg-růžová-600 md:bg-zelená-700 lg:bg-fialová-500 xl:bg-teal-600 2xl:bg-žlutá-500' >
< h1 třída = 'text-7xl text-bílý text-centrum p-20' > Nápověda pro Linux < / h1 >
< / div >
< / tělo >
Tady:
- “ bg-fuchsie-400 ” třída nastavuje barvu pozadí do fuchsie.
- “ sm:bg-růžová-600 Třída ” aplikuje růžovou barvu na pozadí pro malé obrazovky.
- “ md:bg-green-700 ” změní barvu pozadí na zelenou na středních obrazovkách.
- “ lg:bg-purple-50 ” třída nastaví barvu pozadí na fialovou pro velké obrazovky.
- “ xl:bg-teal-600 Třída ” aplikuje modrozelenou barvu na pozadí pro extra velké obrazovky.
- “ 2xl:bg-žlutá-500 ” změní barvu pozadí na žlutou na obrazovkách 2xl.
Krok 2: Ověřte výstup
Prohlédněte si webovou stránku HTML a ověřte, zda responzivní zarážky fungují správně nebo ne:
Na výše uvedené webové stránce lze pozorovat, že barva webové stránky se mění s velikostí obrazovky, podle které byly zadány body přerušení.
Závěr
Chcete-li v Tailwindu používat responzivní zarážky, použijte responzivní modifikátory, jako je „ sm “, “ md “, “ lg “, “ xl ' a ' 2xl ” s ostatními třídami v programu HTML. Tyto modifikátory se používají k aplikaci různých stylů na konkrétní prvek na základě velikosti obrazovky. Tento zápis je příkladem metody použití responzivních zarážek v Tailwind CSS.