Acest articol va ilustra metoda de utilizare a punctelor de întrerupere receptive în CSS Tailwind.
Cum să utilizați punctele de întrerupere receptive în Tailwind?
Pentru a utiliza punctele de întrerupere receptive în Tailwind, utilizați modificatorii de răspuns, cum ar fi „ sm ”, “ md ”, “ lg ”, “ xl ' și ' 2xl ” cu celelalte clase din programul HTML. Apoi, vizualizați pagina web HTML și modificați dimensiunea ecranului pentru a vă asigura că punctele de întrerupere funcționează corect.
Pasul 1: Utilizați modificatorii de răspuns în programul HTML
Creați un program HTML și utilizați modificatorii receptivi cu stilul dorit. De exemplu, am folosit „ sm ”, “ md ”, “ lg ”, “ xl ' și ' 2xl ” modificatori receptivi:
< corp >
< div clasă = „h-screen bg-fuchsia-400 sm:bg-roz-600 md:bg-verde-700 lg:bg-violet-500 xl:bg-teal-600 2xl:bg-galben-500” >
< h1 clasă = „text-7xl text-alb text-center p-20” > Sugestie Linux < / h1 >
< / div >
< / corp >
Aici:
- „ bg-fucsia-400 ” clasa setează culoarea de fundal a la fucsia.
- „ sm:bg-roz-600 ” clasa aplică culoarea roz pe fundal pentru ecranele mici.
- „ md:bg-verde-700 ” clasa schimbă culoarea de fundal în verde pe ecranele medii.
- „ lg:bg-violet-50 ” clasa setează culoarea de fundal la violet pentru ecranele mari.
- „ xl:bg-teal-600 ” clasa aplică culoarea ceaiului pe fundal pentru ecranele foarte mari.
- „ 2xl:bg-galben-500 ” clasa schimbă culoarea de fundal în galben pe ecranele 2xl.
Pasul 2: Verificați ieșirea
Vizualizați pagina web HTML pentru a verifica dacă punctele de întrerupere receptive funcționează corect sau nu:
În pagina web de mai sus, se poate observa că culoarea paginii web se schimbă odată cu dimensiunea ecranului în funcție de care au fost specificate punctele de întrerupere.
Concluzie
Pentru a utiliza punctele de întrerupere receptive în Tailwind, utilizați modificatorii de răspuns, cum ar fi „ sm ”, “ md ”, “ lg ”, “ xl ' și ' 2xl ” cu celelalte clase din programul HTML. Acești modificatori sunt utilizați pentru a aplica diferite stiluri unui anumit element în funcție de dimensiunea ecranului. Acest articol a exemplificat metoda de utilizare a punctelor de întrerupere receptive în CSS Tailwind.