Altura
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.
Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del viewport (o la caja de la página, para paged media).
Sintáxis
La característica height es especificada como un valor <length> representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.
Ejemplo
HTML
html
<div>Watch this element as you resize your viewport's height.</div>
CSS
css
/* Altura exacta */
@media (height: 360px) {
div {
color: red;
}
}
/* Altura mínima */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Altura máxima */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
Resultado
Especificaciones
| Especificación |
|---|
| Media Queries Level 4 # height |