Acest articol va explica cum să utilizați punctul de întrerupere și interogarea media împreună cu proprietatea de poziție în Tailwind.
Cum să utilizați punctele de întrerupere și interogările media cu proprietatea poziției?
Punctele de întrerupere sunt blocurile de bază pentru crearea unui design responsiv final. Este folosit pentru a face aspectul adaptabil la diferite dimensiuni de ecran. Interogările media sunt utilizate pentru a aplica stiluri specificate elementelor în funcție de rezoluția ecranului. Atributul de poziție poate fi aplicat împreună cu acestea pentru a optimiza rezultatul.
Pasul 1: Aplicarea proprietății de poziție cu puncte de întrerupere și interogări media
În acest pas, programul este inserat pentru a aplica proprietatea poziției de-a lungul punctelor de întrerupere sau interogărilor media peste „ p ' element:
< corp clasă = „bg-slate-500” >
< div clasă = „text-galben-300 p-4 lg:p-8” >
< p clasă = 'relativ md:absolute md:text-lg md:translate-x-4 md:translate-y-4 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. Va fi mai mic pe ecranele mici, de dimensiuni medii pe ecranele medii și mai mare pe ecranele mari. < / p >
< / div >
< / corp >
În acest cod:
- „ bg-ardezie-500 ” setează culoarea de fundal la gri.
- „ text-galben-300 ” schimbă culoarea textului în galben.
- „ p-4 ” adaugă o umplutură de 4px.
- „ lg: p-8' adaugă o umplutură de 8px pe ecranele mari.
- Poziția inițială este setată în raport cu pagina părinte folosind butonul „ relativ ” clasa.
- „ md:text-lg ” face textul mare pe un ecran de dimensiuni medii.
- „md:absolut” modifică poziția textului de la relativă la absolută pe un ecran de dimensiuni medii.
- „ md:translate-x-4” și „md:translate-y-4” mutați textul 4px în jos și la dreapta pe ecran de dimensiune medie.
- „ lg:text-xl ” modifică dimensiunea textului în extra-mare pe un ecran de dimensiuni mari.
- „ lg:static ” schimbă poziția textului față de pagina părinte de la absolut la static pe un ecran de dimensiuni mari
- „ lg:translate-x-4 ' și ' lg:translate-y-4 ” mutați textul 4px în jos și la dreapta pe un ecran de dimensiune mare.
Pasul 2: Verificați ieșirea
Previzualizați pagina web creată de codul de mai sus și ajustați dimensiunea ecranului pentru a vedea modificarea ca:
Se poate observa că textul prezintă un comportament receptiv pe ecrane de dimensiuni medii și mari.
Concluzie
Pentru a utiliza punctele de întrerupere și interogările media în Tailwind, aplicați punctul de întrerupere și setați interogarea media la fiecare punct de întrerupere și, de asemenea, modificați proprietatea poziției la diferite puncte de întrerupere ale ecranului. Defalcările implicite sunt „ sm ', ' md ', ' lg ', și ' xl ”. Acest blog a arătat cum să utilizați punctul de întrerupere și interogarea media cu proprietatea de poziție în Tailwind.