height
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die height CSS Medienfunktion kann verwendet werden, um Stile basierend auf der Höhe des Viewports (oder des Seitenbereichs bei Seitenmedien) anzuwenden.
Syntax
Die height-Funktion wird als ein <length>-Wert angegeben, der die Höhe des Viewports darstellt. Es handelt sich um eine Bereichsfunktion, was bedeutet, dass Sie auch die präfixierten Varianten min-height und max-height verwenden können, um Mindest- bzw. Höchstwerte abzufragen.
Beispiele
HTML
html
<div>Watch this element as you resize your viewport's height.</div>
CSS
css
/* Exact height */
@media (height: 360px) {
div {
color: red;
}
}
/* Minimum height */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Maximum height */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 4 # height |
Browser-Kompatibilität
Loading…