Tento blog bude demonštrovať proces použitia mediálnych dopytov a bodov prerušenia pomocou pomôcky overscroll v Tailwinde.
Ako použiť mediálne dotazy a body prerušenia pomocou funkcie Overscroll v Tailwinde?
Ak chcete použiť prerušovacie body alebo ich iné mediálne dopyty na názov, pokiaľ ide o CSS s „ prerolovať ”úžitok. Vytvorí sa program HTML a použije rôzne body prerušenia “ sm ',' md “ alebo „ lg ” s vhodnými pomocnými triedami z pomocného programu “overscroll”. Zmení správanie posúvania položiek na rôznych veľkostiach obrazovky.
Krok 1: Použite body prerušenia a mediálne dotazy v kóde HTML
Vytvorte dokument HTML a použite body prerušenia, čo sú veľkosti obrazovky a mediálne dotazy pre každý bod prerušenia. Napríklad „ md “ a „ lg ” prerušovacie body sa používajú v nižšie uvedenom kóde pre veľkosť textu a aplikuje sa naň správanie pri pretáčaní:
< telo trieda = 'bg-slate-500' >
< div trieda = 'text-red-900 p-4 lg:p-8' >
< p trieda = 'relatívne md:absolútne 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 mať rôzne veľkosti písma v závislosti od veľkosti obrazovky. to budú menšie na malých obrazovkách , stredná - veľkosti na stredných obrazovkách , a väčšie na veľkých obrazovkách. p >
div >
telo >
V tomto kóde:
- “ bg-slate-500 ” nastaví farbu pozadia na sivú.
- “ text-red-900 ” zmení farbu textu na červenú.
- “ p-4 “ pridáva výplň 4px.
- “ lg: p-8 “ pridáva výplň 8px na veľkých obrazovkách.
- Počiatočná poloha „ Značka ” sa nastaví vzhľadom na nadradenú stránku pomocou značky “ príbuzný ' trieda.
- “ md:absolutne ” zmeniť polohu textu z relatívnej na absolútnu na stredne veľkej obrazovke.
- “ md:overscroll-contain “ zaisťuje, že správanie „overscroll“ je obsiahnuté v tomto prvku namiesto toho, aby ovplyvnilo celú stránku, keď je obrazovka stredne veľká.
- “ md:text-lg ” zväčší text na stredne veľkej obrazovke.
- “ md:translate-x-4 “ a „ md:translate-y-4 'presunúť text' 4px ” nadol a doprava na strednej veľkosti obrazovky.
- “ lg:overscroll-none “nastavuje „ prerolovať ” trieda na žiadnu na veľkej obrazovke.
- “ lg:text-xl ” zmení veľkosť textu na extra veľkú pre veľkú obrazovku.
- “ lg:statický ” zmení polohu textu vzhľadom na nadradenú stranu z absolútnej na statickú pre veľkú obrazovku
- “ lg:translate-x-4 “ a „ lg:translate-y-4 ” posuňte text o 4 pixely nadol a doprava na veľkej obrazovke.
Krok 2: Ukážka výstupu
Teraz si zobrazte ukážku webovej stránky vytvorenej spustením vyššie uvedeného kódu HTML a zmeňte veľkosť obrazovky stránky HTML, aby ste videli viditeľné zmeny:
Na obrazovke vyššie sa zobrazí „ prerolovať ” správanie je viditeľné a zmenšením veľkosti obrazovky je možné vidieť, že veľkosť textu sa mení podľa mediálnych dopytov, ktoré sú naň použité.
Záver
Ak chcete použiť mediálne dotazy a body prerušenia pomocou „ prerolovať ”, zadajte body prerušenia s nejakou požadovanou triedou z utility “overscroll”. Zmenou veľkosti obrazovky mediálne dotazy upravujú výstup obrazovky. Tento blog demonštroval proces použitia mediálnych dopytov a bodov prerušenia pomocou správania „overscroll“ v Tailwinde.