Mobiele weergave: responsive design

Je site op mobiele apparaten

Als je je website eerst op je eigen computer codeert, kan je hem niet eenvoudig op je smartphone uittesten. De browser Google Chrome biedt hiervoor een handige oplossing. 

De mobiele weergave testen

Het is belangrijk dat een website goed wordt weergegeven op mobiele apparaten. Als je bijvoorbeeld gebruik maakt van display:flex om elementen naast elkaar weer te geven, dan worden die blokken vaak te smal op mobiele toestellen. Met "media queries" kan je ervoor zorgen dat je site ook op mobiel goed wordt weergegeven. 

Je kan in je CSS-bestand namelijk opnemen dat je site er anders moet uitzien op "smallere" toestellen. Deze extra stijlregels neem je onderaan je CSS-bestand op. Je definieert dus eerst alle "algemene" regels en de regels voor "brede" toestellen, onderaan noteer je welke uitzonderingen er op die regels zijn voor "smallere" toestellen. 

In het onderstaande voorbeeld vertellen we bijvoorbeeld hoe de site er moet uitzien op toestellen die smaller zijn dan 960px. Je kan achter elkaar nog andere stijlregels definiëren voor "nog smallere" toestellen. Je kopieert dan het onderstaande stukje, en je past de "breedte" aan.    

@media (max-width:960px){
    /*hier noteer je de uitzonderingsregels*/
}

Als je de volgende stijlregels opneemt, zal het gedeelte main section niet meer "flex" zijn, maar "block" op smallere toestellen. Hierdoor gaan de article-elementen in section niet meer naast, maar onder elkaar staan. 

@media (max-width:960px){
    /*hier noteer je de uitzonderingsregels*/
    main section{
       display:block;
    }
}
Het is niet eenvoudig om voor iedereen op deze manier een "standaard" oplossing te voorzien. Het hangt af van site tot site hoe je problemen met de weergave oplost. 
Volgende pagina