Este artículo proporcionará el procedimiento para aplicar la altura mínima y la altura máxima en los puntos de interrupción y consultas de medios de Tailwind utilizando el siguiente esquema:
- Configuración de la propiedad de altura mínima en puntos de interrupción y consultas de medios de Tailwind
- Configuración de la propiedad de altura máxima en puntos de interrupción y consultas de medios de Tailwind
¿Cómo establecer la propiedad de altura mínima en consultas de medios y puntos de interrupción de Tailwind?
Tailwind proporciona puntos de interrupción predeterminados y consultas de medios para que el diseño responda a diferentes tamaños de pantalla. Las propiedades proporcionadas a los puntos de interrupción se aplican cuando se alcanza el tamaño de pantalla especificado. El ancho mínimo para estos puntos de interrupción predeterminados se describe a continuación:
- SM: Ancho mínimo de “640px”.
- Maryland: Ancho mínimo de “768px”.
- LG: Ancho mínimo de “1024px”.
- SG: Ancho mínimo de “1280px”.
- 2XL: Ancho mínimo de “1536px”.
La propiedad min-height establece el límite inferior para la altura de un elemento. Esto significa que especifica la altura mínima que puede tener un elemento. Para utilizar la propiedad min-height con los puntos de interrupción en Tailwind, se utiliza la siguiente sintaxis:
< div clase = '{prefijo de punto de interrupción}:min-h-{valor}...' > < / div >
Usemos la sintaxis definida anteriormente en una demostración para comprender mejor. En este ejemplo, el límite de altura mínima para el elemento aumentará en el ' Maryland ”punto de interrupción. Esto dará como resultado un aumento de la altura total del elemento.
< div clase = 'h-48 w-48 redondeado-md bg-verde-500 centro de texto md:min-h-pantalla' >Aumentar la pantalla Tamaño Aumentar la altura mínima< / div >
La explicación del código anterior es la siguiente:
- El ' h-48 La clase 'proporciona una altura de 192 px al elemento div.
- El ' w-48 La clase 'proporciona una altura de 192 px al elemento div.
- El ' md redondeado La clase 'proporciona la esquina redondeada al elemento div.
- El ' bg-{color}-{número} La clase 'proporciona el color especificado al fondo del elemento div.
- El ' centro de texto La clase 'coloca el elemento de texto en el centro del elemento div.
- El ' md: min-h-pantalla La clase aumentará el límite de altura mínima igual al 100% de la altura de la pantalla.
Producción:
Se puede ver en el resultado que cuando el ' Maryland ”Se cumple el tamaño de la pantalla, el elemento obtendrá el 100% de la altura de la pantalla. Esto sucede porque el límite de altura mínima para el ' Maryland El punto de interrupción se establece igual a la altura de la pantalla:
¿Cómo establecer la propiedad de altura máxima en consultas de medios y puntos de interrupción de Tailwind?
La clase de altura máxima establece el límite superior para la propiedad de altura en Tailwind. Esto significa que especifica la altura máxima que puede poseer un elemento. La sintaxis para utilizar la clase de altura mínima con puntos de interrupción es la siguiente:
< div clase = '{prefijo de punto de interrupción}:max-h-{tamaño}...' > < / div >Usemos la sintaxis definida anteriormente en una demostración para comprender mejor. En este ejemplo, el elemento contará con un límite de altura máxima específico para el ' Maryland ”punto de interrupción. Esto reducirá la altura predeterminada proporcionada al elemento.
< div clase = 'h-96 w-48 md-redondeado bg-verde-500 centro de texto md:max-h-60' >Aumentar la pantalla Tamaño Aumentar la altura mínima< / div >Tenga en cuenta que en el código anterior, la altura predeterminada de un elemento se proporciona con 'h-96', es decir, 384 px. Sin embargo, esta altura se reduce a '240px' cuando se alcanza el punto de interrupción 'md'. Esto se debe a la “ md:max-h-60 ' clase.
Producción:
En el siguiente resultado, se puede ver claramente que una vez que el tamaño de la pantalla alcanza el ' Maryland ”punto de interrupción, la altura del elemento se hace más pequeña.
Se trata de establecer la propiedad de altura mínima y máxima con puntos de interrupción de Tailwind.
Conclusión
Para establecer la propiedad de altura máxima con los puntos de interrupción y consultas de medios de Tailwind, el botón ' {prefijo de punto de interrupción}:max-h-{tamaño} Se utiliza la clase. De manera similar, para establecer la propiedad de altura mínima con los puntos de interrupción Tailwind, el botón ' {prefijo de punto de interrupción}:min-h-{tamaño} Se utiliza la clase. Este artículo proporciona el procedimiento para aplicar propiedades de altura mínima y máxima a puntos de interrupción y consultas de medios en Tailwind.