Hoofdstuk: Website Maken
Dwarsligger

Hoofdstuk
Hoger Menu

Pagina's
Index
HTML Mijn CMS Een Tekst Opmaken Is Mijn website Veilig Responsive CSS Simpele Pagina
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>

Valid HTML Valid CSS Valid i18n
LogIn
Copyright © 2024 Dwarsligger.org.
CMS versie        231027a
Template versie 230324a
Colofoon
Bron: Dwarsligger.org
Verzonden op:
Samengesteld in:
Pagina Grootte:
Aangemaakt op:
Aangepast op:
29 Mrt 2024
35839 µsec.
6371 Bytes
20 nov 2022
20 nov 2022