En aquest article s'explicarà com utilitzar el punt d'interrupció i la consulta multimèdia juntament amb la propietat de posició a Tailwind.
Com utilitzar els punts d'interrupció i les consultes de mitjans amb la propietat de posició?
Els punts d'interrupció són els blocs bàsics per crear un disseny responsiu definitiu. S'utilitza per adaptar el disseny a diferents mides de pantalla. Les consultes de mitjans s'utilitzen per aplicar estils especificats als elements en funció de la resolució de la pantalla. L'atribut de posició es pot aplicar juntament amb aquests per optimitzar la sortida.
Pas 1: aplicació de la propietat de posició amb punts d'interrupció i consultes de mitjans
En aquest pas, el programa s'insereix per aplicar la propietat de la posició al llarg dels punts d'interrupció o consultes multimèdia sobre el seleccionat ' pàg 'element:
< cos classe = 'bg-slate-500' >
< div classe = 'text-groc-300 p-4 lg:p-8' >
< pàg classe = 'md relatiu:absolut md:text-lg md:tradueix-x-4 md:tradueix-y-4 lg:text-xl lg:estàtic lg:tradueix-x-4 lg:tradueix-y-4 ' > Aquest text tindrà diferents mides de lletra en funció de la mida de la pantalla. Serà més petit a les pantalles petites, de mida mitjana a les pantalles mitjanes i més gran a les pantalles grans. < / pàg >
< / div >
< / cos >
En aquest codi:
- “ bg-slate-500 ” estableix el color de fons en gris.
- “ text-groc-300 ” canvia el color del text a groc.
- “ pàg-4 ” afegeix un farciment de 4px.
- “ lg: p-8' afegeix un farciment de 8px en pantalles grans.
- La posició inicial s'estableix en relació a la pàgina principal utilitzant el ' relatiu ” classe.
- “ md:text-lg ” fa que el text sigui gran en una pantalla de mida mitjana.
- 'md:absolut' modifica la posició del text de relativa a absoluta en una pantalla de mida mitjana.
- “ md:translate-x-4' i 'md:translate-y-4' moveu el text 4px cap avall i cap a la dreta a la mida mitjana de la pantalla.
- “ lg:text-xl ” canvia la mida del text a molt gran en una pantalla de mida gran.
- “ lg: estàtic ” canvia la posició del text respecte a la pàgina principal d'absoluta a estàtica en una pantalla de mida gran
- “ lg:tradueix-x-4 ' i ' lg:translate-y-4 ” mou el text 4px cap avall i cap a la dreta en una mida de pantalla gran.
Pas 2: verifiqueu la sortida
Previsualitza la pàgina web creada pel codi anterior i ajusta la mida de la pantalla per veure el canvi com:
Es pot veure que el text mostra un comportament sensible en mides de pantalla mitjanes i grans.
Conclusió
Per utilitzar punts d'interrupció i consultes multimèdia a Tailwind, apliqueu el punt d'interrupció i establiu la consulta multimèdia a cada punt d'interrupció, i també canvieu la propietat de la posició en diferents punts d'interrupció de la pantalla. Els desglossats per defecte són ' sm ”, “ md ”, “ lg ”, i “ xl ”. Aquest bloc ha mostrat com utilitzar el punt d'interrupció i la consulta multimèdia amb la propietat de posició a Tailwind.