Aquest bloc mostrarà el procés d'aplicació de consultes multimèdia i punts d'interrupció mitjançant la utilitat de sobrescroll a Tailwind.
Com aplicar consultes de mitjans i punts d'interrupció amb Overscroll a Tailwind?
Per aplicar els punts d'interrupció o els seus altres noms, consultes multimèdia quan es tracta de CSS amb el ' sobrescroll ” utilitat. El programa HTML es crea i aplica els diferents punts d'interrupció ' sm ”, “ md ' o ' lg ” amb les classes d'utilitat adequades de la utilitat “overscroll”. Canvia el comportament de desplaçament dels elements en diferents mides de pantalla.
Pas 1: utilitzeu els punts d'interrupció i les consultes multimèdia al codi HTML
Creeu un document HTML i apliqueu els punts d'interrupció, que són les mides de pantalla i les consultes multimèdia per a cada punt d'interrupció. Per exemple ' md ' i ' lg ” Els punts d'interrupció s'utilitzen al codi següent per a la mida del text i s'hi aplica el comportament de sobrescroll:
< cos classe = 'bg-slate-500' >
< div classe = 'text-vermell-900 p-4 lg:p-8' >
< pàg classe = 'md relatiu:absolut md:overscroll-contain md:text-lg md:tradueix-x-4 md:tradueix-y-4 lg:overscroll-none lg:text-xl lg:static lg:tradueix-x-4 lg :tradueix-y-4 ' > Aquest text tindrà diferents mides de lletra en funció de la mida de la pantalla. Això serà més petit a les pantalles petites , mitjà - mida en pantalles mitjanes , i més gran en pantalles grans. pàg >
div >
cos >
En aquest codi:
- “ bg-slate-500 ” estableix el color de fons en gris.
- “ text-vermell-900 ” canvia el color del text a vermell.
- “ pàg-4 ” afegeix un farciment de 4px.
- “ lg: p-8 ” afegeix un farciment de 8px en pantalles grans.
- La posició inicial del ' L'etiqueta s'estableix en relació a la pàgina principal mitjançant l'opció “ relatiu ” classe.
- “ md: absolut ” Canvia la posició del text de relativa a absoluta en una pantalla de mida mitjana.
- “ md:overscroll-contain ” assegura que el comportament de “sobrescroll” està contingut dins d'aquest element en lloc d'afectar tota la pàgina quan la pantalla és de mida mitjana.
- “ md:text-lg ” fa que el text sigui gran en una pantalla de mida mitjana.
- “ md:tradueix-x-4 ' i ' md:tradueix-y-4 ' mou el text ' 4 píxels ” avall i a la dreta a la mida mitjana de la pantalla.
- “ lg:overscroll-none ' estableix el ' sobrescroll ” propietat de classe a cap en una pantalla de mida gran.
- “ lg:text-xl ” canvia la mida del text a extragran per a una pantalla de mida gran.
- “ lg: estàtic ” canvia la posició del text respecte a la pàgina principal d'absoluta a estàtica per a una pantalla de mida gran
- “ lg:tradueix-x-4 ' i ' lg:translate-y-4 ” mou el text 4 px cap avall i cap a la dreta a la mida de la pantalla gran.
Pas 2: previsualitza la sortida
Ara, previsualitzeu la pàgina web creada executant el codi HTML anterior i canvieu la mida de la pantalla del lloc HTML per veure els canvis visibles:
A la pantalla anterior, el ' sobrescroll ” el comportament és visible i en disminuir la mida de la pantalla es pot veure que la mida del text canvia per les consultes de mitjans aplicades.
Conclusió
Per aplicar les consultes de mitjans i els punts d'interrupció amb el ' sobrescroll ”, especifiqueu els punts d'interrupció amb alguna classe desitjada des de la utilitat “overscroll”. En variar la mida de la pantalla, les consultes multimèdia ajusten la sortida de la pantalla. Aquest bloc ha demostrat el procés d'aplicació de les consultes de mitjans i els punts d'interrupció amb un comportament de 'sobrescroll' a Tailwind.