Tento blog bude demonstrovat proces použití mediálních dotazů a bodů přerušení pomocí nástroje overscroll v Tailwindu.
Jak použít dotazy na média a body přerušení pomocí funkce Overscroll ve službě Tailwind?
Chcete-li použít zarážky nebo jejich jiné dotazy na média, pokud jde o CSS s „ překročit “utilita. Vytvoří se HTML program a použije různé zarážky “ sm ',' md “ nebo „ lg ” s vhodnými třídami utilit z obslužného programu „overscroll“. Mění chování posouvání položek na různých velikostech obrazovky.
Krok 1: Použijte body přerušení a dotazy na média v kódu HTML
Vytvořte dokument HTML a použijte body přerušení, což jsou velikosti obrazovky a dotazy na média pro každý bod přerušení. Například ' md ' a ' lg ” zarážky se v níže uvedeném kódu používají pro velikost textu a je na ně aplikováno chování při přecházení:
< tělo třída = 'bg-slate-500' >
< div třída = 'text-red-900 p-4 lg:p-8' >
< p třída = 'relativní md:absolutní md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none 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. To bude na malých obrazovkách menší , střední - velikosti na středních obrazovkách , a větší na velkých obrazovkách. p >
div >
tělo >
V tomto kódu:
- “ bg-břidlice-500 ” nastaví barvu pozadí na šedou.
- “ text-red-900 ” změní barvu textu na červenou.
- “ p-4 “ přidává odsazení 4px.
- “ lg: p-8 “ přidává výplň 8px na velkých obrazovkách.
- Počáteční poloha „ ” tag se nastaví vzhledem k nadřazené stránce pomocí “ relativní “třída.
- “ md:absolutní ” změnit polohu textu z relativní na absolutní na středně velké obrazovce.
- “ md:overscroll-contain “ zajišťuje, že chování „overscroll“ je obsaženo v tomto prvku namísto ovlivnění celé stránky, když je obrazovka středně velká.
- “ md:text-lg ” zvětší text na středně velké obrazovce.
- “ md:translate-x-4 ' a ' md:translate-y-4 'přesunout text' 4px ” dolů a doprava na střední velikosti obrazovky.
- “ lg:overscroll-none “ nastavuje „ překročit ” class vlastnost na none na velké obrazovce.
- “ lg:text-xl ” změní velikost textu na extra velký pro velkou obrazovku.
- “ lg:statický ” změní polohu textu vzhledem k nadřazené stránce z absolutní na statickou pro velkou obrazovku
- “ lg:translate-x-4 ' a ' lg:translate-y-4 ” posuňte text o 4 pixely dolů a doprava na velké obrazovce.
Krok 2: Náhled výstupu
Nyní si zobrazte náhled webové stránky vytvořené spuštěním výše uvedeného kódu HTML a změňte velikost obrazovky webu HTML, abyste viděli viditelné změny:
Na obrazovce výše se zobrazí „ překročit ” chování je viditelné a zmenšením velikosti obrazovky lze vidět, že se velikost textu mění podle dotazů na média, které jsou na něj aplikovány.
Závěr
Chcete-li použít dotazy na média a body přerušení pomocí „ překročit ”, určete zarážky s nějakou požadovanou třídou z obslužného programu “overscroll”. Změnou velikosti obrazovky upravují dotazy na média výstup obrazovky. Tento blog demonstroval proces použití mediálních dotazů a bodů přerušení pomocí chování „overscroll“ ve službě Tailwind.