Terug

Responsive Design 2 – Mediaqueries

We gaan nu echt aan de slag om onze wireframes responsive te maken. Hiervoor gebruiken we een mediaquery.

  1. Twee versies

    Omdat dit de eerste keer is dat we een responsive site maken, beginnen we eerst nog even met twee losse CSS bestanden, die we daarna samenvoegen. Als je wat meer geoefend bent kun je ook meteen met één CSS bestand beginnen.

    Download les5_opdracht.zip. Hierin zie je één HTML bestand en twee CSS bestanden. Aan beide bestanden hoeft alleen nog het grid toegevoegd te worden.

    In het HTML bestand hoef je niets aan te passen, behalve om de verwijzing naar het CSS bestand om te zetten als je met desktop aan de slag wil.

  2. De Mediaquery

    Als je tevreden bent met beide versies van de site, hernoem dan styleMobile.css naar style.css. Pas ook de verwijzing aan in HTML.

  3. Voeg onderaan het style.css-bestand, op een nieuwe regel, de volgende code toe:

    /*---------DESKTOP VERSIE-------------------*/
    @media (min-width : 1024px) {
    
    }
    

    Een mediaquery werkt alleen als bepaalde voorwaarden waar zijn. In dit geval wordt deze mediaquery alleen uitgevoerd, als het venster minstens 1024 pixels breed is. Tussen de { en } kunnen we CSS code toevoegen, die alleen zichtbaar wordt op brede schermen.

  4. We gaan de mediaquery even vlug testen. Plak de volgende code tussen de { en } van je mediaquery:

    body { 
        background-color: red;
    }
    
    div {
        background-color: yellow;
        font-family: "Comic Sans MS";
    }
    

    Als het goed is kun je nu al je mediaquery zien werken, door het venster groter en kleiner te maken, of de Device Emulator aan en uit te zetten.

    Zodra je hebt gezien dat het werkt, kun je deze code weer verwijderen.

LET OP:

In een mediaquery zet je alleen de CSS code die anders is in de desktop versie van je site. Alle code die hetzelfde is op mobiel en desktop, hoef je dus niet te kopiëren naar je mediaquery.

Bijvoorbeeld:
Deze div is op mobiel groen gekleurd en 100vw breed. Op desktop wil ik dat deze div nog steeds groen is, maar 500px breed. In de mediaquery zet ik alleen wat verandert:

#mijnDiv {
    background-color: green;
    width: 100vw;
}

/*---------DESKTOP VERSIE-------------------*/
@media (min-width : 1024px) {
    #mijnDiv {
        width: 500px;
    }
}
  1. Maak tussen de { en } van je mediaquery een nieuwe body-tag:
    body { 
    
    }
    

    Geef hier de columns en rows van je grid aan, zoals dat er uit moet zien voor desktop. Kopieer daarvoor ALLEEN de regels die je écht nodig hebt, dus alleen de regels die ANDERS zijn dan mobiel, uit styleDesktop.css.

  2. Maak in je mediaquery nu ook verwijzingen naar alle div-elementen die op desktop een andere locatie hebben, en kopieer de nieuwe locatie uit styleDesktop.css. Controleer steeds zorgvuldig of je echt zo min mogelijk kopieert.

    In de mobiele versie moest #img5 onzichtbaar zijn. Daarom heeft deze display: none; gekregen.
    Op desktop moet #img5 wél zichtbaar zijn. Geef hem daarom in de mediaquery de waarde display: block;.
    Dan wordt het div-element weer zichtbaar.

  3. Als het goed is, is je site nu volledig responsive. Als je al wireframes hebt ontworpen voor je eigen site, kun je daar nu mee aan de slag. Succes!