Aquest article proporcionarà el procediment per aplicar l'alçada mínima i l'alçada màxima als punts d'interrupció i consultes multimèdia de Tailwind mitjançant l'esquema següent:
- Configuració de la propietat d'altura mínima als punts d'interrupció i consultes multimèdia de Tailwind
- Configuració de la propietat d'alçada màxima als punts d'interrupció i consultes multimèdia de Tailwind
Com establir la propietat d'altura mínima al punt d'interrupció i consultes multimèdia de Tailwind?
Tailwind proporciona punts d'interrupció predeterminats i consultes multimèdia per fer que el disseny respongui a diferents mides de pantalla. Les propietats proporcionades als punts d'interrupció s'apliquen quan es compleix la mida de pantalla especificada. L'amplada mínima d'aquests punts d'interrupció per defecte es descriu a continuació:
- sm: Amplada mínima de '640px'.
- md: Amplada mínima de '768px'.
- lg: Amplada mínima de '1024px'.
- xl: Amplada mínima de '1280 px'.
- 2xl: Amplada mínima de '1536 px'.
La propietat min-height estableix el límit inferior per a l'alçada d'un element. Això vol dir que especifica l'alçada mínima que pot tenir un element. Per utilitzar la propietat min-height amb els punts d'interrupció de Tailwind, s'utilitza la sintaxi següent:
< div classe = '{prefix de punt d'interrupció}:min-h-{valor}...' > < / div >
Utilitzem la sintaxi definida anteriorment en una demostració per entendre-ho millor. En aquest exemple, el límit d'alçada mínima per a l'element augmentarà a la ' md ” punt d'interrupció. Això augmentarà l'alçada total de l'element.
< div classe = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > Augmenta la pantalla Mida per augmentar l'alçada mínima < / div >
L'explicació del codi anterior és la següent:
- El ' h-48 La classe proporciona una alçada de 192 px a l'element div.
- El ' w-48 La classe proporciona una alçada de 192 px a l'element div.
- El ' arrodonit-md ” La classe proporciona la cantonada arrodonida a l'element div.
- El ' bg-{color}-{nombre} ” La classe proporciona el color especificat al fons de l'element div.
- El ' centre de text ” class posiciona l'element de text al centre de l'element div.
- El ' md:min-h-pantalla ”La classe augmentarà el límit d'alçada mínima igual al 100% de l'alçada de la pantalla.
Sortida:
Es pot veure a la sortida, que quan el ' md ” es compleix la mida de la pantalla, l'element obtindrà el 100% de l'alçada de la pantalla. Això passa perquè el límit d'alçada mínima per al ' md ” El punt d'interrupció s'estableix igual a l'alçada de la pantalla:
Com establir la propietat d'alçada màxima al punt d'interrupció i consultes multimèdia de Tailwind?
La classe d'alçada màxima estableix el límit superior per a la propietat d'alçada a Tailwind. Això vol dir que especifica l'alçada màxima que pot tenir un element. La sintaxi per utilitzar la classe d'alçada mínima amb punts d'interrupció és la següent:
< div classe = '{prefix de punt d'interrupció}:max-h-{mida}...' > < / div >Utilitzem la sintaxi definida anteriorment en una demostració per entendre-ho millor. En aquest exemple, l'element tindrà un límit d'alçada màxim específic per al ' md ” punt d'interrupció. Això reduirà l'alçada predeterminada proporcionada a l'element.
< div classe = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > Augmenta la pantalla Mida per augmentar l'alçada mínima < / div >Tingueu en compte que al codi anterior, l'alçada predeterminada d'un element es proporciona amb 'h-96', és a dir, 384 px. Tanmateix, aquesta alçada es redueix a '240px' quan es compleix el punt d'interrupció 'md'. Això es deu a la ' md:max-h-60 ” classe.
Sortida:
A la sortida següent, es pot veure clarament que un cop la mida de la pantalla arriba al ' md ” punt d'interrupció, l'alçada de l'element es redueix.
Es tracta d'establir la propietat d'alçada mínima i màxima amb els punts d'interrupció de Tailwind.
Conclusió
Per establir la propietat d'alçada màxima amb els punts d'interrupció i les consultes multimèdia de Tailwind, el ' {prefix de punt d'interrupció}: max-h-{mida} s'utilitza la classe. De la mateixa manera, per establir la propietat d'alçada mínima amb els punts de ruptura de Tailwind, el ' {prefix de punt d'interrupció}: min-h-{mida} s'utilitza la classe. Aquest article ha proporcionat el procediment per aplicar propietats d'alçada mínima i màxima als punts d'interrupció i consultes multimèdia a Tailwind.