Acest blog va demonstra procesul de aplicare a interogărilor media și a punctelor de întrerupere folosind utilitarul de suprascroll în Tailwind.
Cum să aplicați interogări media și puncte de întrerupere cu Overscroll în Tailwind?
Pentru a aplica punctele de întrerupere sau alte interogări media de nume atunci când vine vorba de CSS cu „ overscroll ” utilitate. Programul HTML este creat și aplică diferitele puncte de întrerupere „ sm ', ' md ” sau ” lg ” cu clasele de utilitate adecvate din utilitarul „overscroll”. Schimbă comportamentul de defilare al elementelor de pe diferite dimensiuni de ecran.
Pasul 1: Utilizați punctele de întrerupere și interogările media din codul HTML
Creați un document HTML și aplicați punctele de întrerupere care sunt dimensiunile ecranului și interogările media pentru fiecare punct de întrerupere. De exemplu ' md ' și ' lg ” Punctele de întrerupere sunt utilizate în codul de mai jos pentru dimensiunea textului și comportamentul de derulare excesivă este aplicat acestuia:
< corp clasă = „bg-slate-500” >
< div clasă = „text-roșu-900 p-4 lg:p-8” >
< p clasă = „relativ md:absolute 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 ' > Acest text va avea diferite dimensiuni de font în funcție de dimensiunea ecranului. Aceasta va fi mai mic pe ecranele mici , mediu - dimensionate pe ecrane medii , și mai mare pe ecrane mari. p >
div >
corp >
În acest cod:
- „ bg-ardezie-500 ” setează culoarea de fundal la gri.
- „ text-roșu-900 ” schimbă culoarea textului în roșu.
- „ p-4 ” adaugă o umplutură de 4px.
- „ lg: p-8 ” adaugă un padding de 8px pe ecranele mari.
- Poziția inițială a „ Eticheta ” este setată în raport cu pagina părinte prin utilizarea etichetei “ relativ ” clasa.
- „ md:absolut ” schimba poziția textului de la relativ la absolut pe un ecran de dimensiuni medii.
- „ md:overscroll-contain ” se asigură că comportamentul „overscroll” este conținut în acel element în loc să afecteze întreaga pagină atunci când ecranul este de dimensiune medie.
- „ md:text-lg ” face textul mare pe un ecran de dimensiuni medii.
- „ md:translate-x-4 ' și ' md:translate-y-4 „mută textul” 4px ” jos și la dreapta pe ecran de dimensiune medie.
- „ lg:overscroll-none ' setează ' overscroll ” proprietate de clasă la niciunul pe un ecran de dimensiuni mari.
- „ lg:text-xl ” modifică dimensiunea textului în extra-large pentru un ecran de dimensiuni mari.
- „ lg:static ” schimbă poziția textului față de pagina părinte de la absolut la static pentru un ecran de dimensiuni mari
- „ lg:translate-x-4 ' și ' lg:translate-y-4 ” mutați textul 4px în jos și la dreapta pe ecranul de dimensiune mare.
Pasul 2: Previzualizați ieșirea
Acum, previzualizați pagina web creată prin executarea codului HTML de mai sus și modificați dimensiunea ecranului site-ului HTML pentru a vedea modificările vizibile:
În ecranul de mai sus, „ overscroll ” comportamentul este vizibil și prin scăderea dimensiunii ecranului se poate observa că dimensiunea textului se modifică prin interogările media aplicate acestuia.
Concluzie
Pentru a aplica interogările media și punctele de întrerupere cu „ overscroll „, specificați punctele de întrerupere cu o clasă dorită din utilitarul „overscroll”. Variind dimensiunea ecranului, interogările media ajustează rezultatul ecranului. Acest blog a demonstrat procesul de aplicare a interogărilor media și a punctelor de întrerupere cu comportamentul „overscroll” în Tailwind.