Responsive CSS

Met behulp van CSS (Cascading Style Sheets) is het mogelijk, om een webpagina aan te passen aan het formaat van het beeldscherm.
Vaak wordt dat op de volgende manier vorm gegeven:

@media only screen and (min-width: 900px)
{
/* Scherm opbouw voor een groot scherm */
}

@media only screen and (max-width: 900px)
{
/* Scherm opbouw voor een klein scherm */
}

Dit kan echter ook in meer dan 2 stappen:

@media (max-width: 800px)
{
/* Scherm opbouw voor een klein scherm */
}

@media (min-width:800px) and (max-width:1200px)
{
/* Scherm opbouw voor een tussen formaat scherm */
}

@media (min-width: 1200px)
{
*/ Scherm opbouw voor een groot scherm */
}

Wanneer een stuk scherm niet wordt gebruikt, maar er wel naar wordt verwezen, dan kan dat worden onderdrukt met:

naam { display:none; }

Wanneer u de afmetingen van het huidige scherm wilt weten, toen de pagina werd opgehaald, dan zet u in de html het volgende:

Resolutie:<span id="SchermGrootte"></span>
<script>
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("SchermGrootte");
x.innerHTML = w + " x " + h + "px";
</script>

	Colofoon
Bron:	Dwarsligger.org

Verzonden op:
Samengesteld in:
Pagina Grootte:
Aangemaakt op:
Aangepast op:

23 Mrt 2023
1465 µsec.
6650 Bytes
20 nov 2022
20 nov 2022