Hoogte-responsieve ontwerpen zijn handig bij het aanpassen van websites aan verschillende schermgroottes, vooral voor verschillende apparaten zoals telefoons, tablets en desktops.
CSS maakt gebruik van media queries om te reageren op verschillende schermhoogtes. Media queries zijn regels die de stijl van een pagina aanpassen op basis van specifieke eigenschappen van het apparaat, zoals de hoogte.
Hier is een basisvoorbeeld van hoe je hoogte-responsieve elementen maakt met CSS:
```
/* Voor apparaten met een schermhoogte van 600px of lager */
@media screen and (max-height: 600px) {
.element-klasse {
height: 50%; /* Verklein de hoogte van het element */
}
}
/* Voor apparaten met een schermhoogte van 601px tot 900px */
@media screen and (min-height: 601px) and (max-height: 900px) {
.element-klasse {
height: 75%; /* Verander de hoogte van het element */
}
}
/* Voor apparaten met een schermhoogte van 901px of hoger */
@media screen and (min-height: 901px) {
.element-klasse {
height: 100%; /* Vergroot de hoogte van het element */
}
}
```
In dit voorbeeld wordt de hoogte van alle elementen met de class “element-klasse” aangepast op basis van de schermhoogte van het apparaat waarop de website wordt bekeken.
Houd er rekening mee dat dit slechts een voorbeeld is en mogelijk moet worden aangepast op basis van specifieke ontwerpvereisten. Het gebruik van deze techniek kan echter nuttig zijn voor het realiseren van een hoogte-responsief ontwerp met CSS.
