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
<div>Watch this element as you resize your viewport's height.</div>
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 | Estado | Comentario |
---|---|---|
Media Queries Level 4 La definición de 'height' en esta especificación. |
Candidate Recommendation | El valor ahora puede ser negativo, en cuyo caso se calcula como negativo. |
Media Queries La definición de 'height' en esta especificación. |
Recommendation | Definición inicial. El valor debe ser positivo. |
Compatibilidad con navegadores
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.