CSS media queries voor een responsive website

CSS media queries

Met zoveel (mobiele) apparaten en beeldschermformaten, is het essentieel dat jouw website zich aanpast aan het beeldscherm waarop deze wordt bekeken. Jouw website moet dus responsive zijn. Hier zijn media queries voor. Deze post laat je zien wat media queries zijn en welke er standaard in Divi ingesteld zijn. Bovendien leer je hoe je met aangepaste CSS media queries jouw website voor elk formaat beeldscherm responsive kunt maken.

Wat zijn media queries

Een media query is een stukje CSS code die in de stylesheet van jouw website staat. In deze code staan specifieke breekpunten. Breekpunten zijn gedefinieerde punten in de code van de website waar de inhoud verandert of reageert op basis van de apparaat breedte. Een media query vertelt de browser hoe de inhoud moet worden weergegeven als deze aan bepaalde criteria voldoet. Dit zorgt er dus voor dat de inhoud van jouw pagina zich aanpast aan het beeldschermformaat waarin deze wordt weergegeven.

De breedte waarnaar wordt verwezen is niet de schermresolutie van het apparaat, maar de breedte van de viewport. Een Samsung Galaxy S10 heeft bijvoorbeeld een resolutie van 1440 x 3040 px, maar de viewport is 360 x 760 px.

Media queries in Divi

Divi heeft standaard ingebouwde media queries die je helpen jouw website responsive te maken. Divi gebruikt hiervoor exacte afmetingen voor de desktop, tablet en telefoon . De algemene breedtes voor apparaten zijn:

Grote desktops 1405 px en hoger
Standaard desktops tussen 1100 px en 1405 px
Laptops en grote tablets tussen 980 px en 1100 px
Tablets tussen 768 px en 980 px
Smartphones en kleine tablets tussen 320 px en 768 px
Smartphones tussen 320 px en 480 px

De media queries in Divi zien er als volgt uit:

De belangrijkste punten zitten op max-breedte 768px voor mobiele telefoons en 1101px voor tablets , dit zijn de punten waarop de responsieve instellingen in elke module werken. Een ander duidelijk punt is 981px waar de zijbalk onder de inhoud beweegt en het menu mobiel wordt.

Responsive webdesign in Divi

Divi is klaar voor responsive webdesign. Overal in Divi zijn ingebouwde functies waarmee je een website zo kunt instellen dat ze goed worden weergegeven op verschillende apparaten en schermformaten. Terwijl je jouw website ontwerpt, kun je wisselen tussen verschillende weergaven van schermafmetingen (desktop, tablet en mobiel). Zo kun je zien hoe jouw website op elk apparaat wordt weergegeven. Ten eerste kun je eenvoudig schakelen tussen de 3 verschillende apparaatweergaven in de Theme Customizer. Daarnaast kun je tijdens het ontwerpen van een pagina-, post- of project lay-out klikken op de apparaat pictogrammen om te zien hoe de lay-out op elk apparaat wordt weergegeven. Ten slotte heeft elke module ook nog eens de apparaat pictogrammen beschikbaar om de meest geschikte responsive weergave voor elk apparaat te bereiken. Je kunt hiermee in de module zelf de verschillende dimensies instellen, zoals lettergrootte, marges, en nog veel meer.

Met deze ingebouwde opties in Divi, is het ongelofelijk eenvoudig om een responsive website te bouwen. Maar zelfs met zo’n hoge mate van aanpassing in handbereik, kunnen er een aantal secties, rijen of modules zijn die er niet 100% goed uitzien op elk apparaat. Om dit op te lossen, kun je eigen aangepaste media queries gebruiken.

Hoe ziet het er uit en hoe werkt het?

Een voorbeeld van een media query is:

Met bovenstaande media query geef je aan dat op alle schermen breder dan 980px de lettergrootte van de H1-kopteksten 40px moet zijn. We gaan de media query eens ontleden:

  • @media: Elke media query begint met de @media regel. Deze wordt gebruikt om het codefragment toe te passen op een specifiek mediatype, in ons geval de breedte van de apparaat viewport.
  • De apparaat breedte: Nu komt het deel waar we de breedte kunnen kiezen. Veel gebruikt zijn de termen min-width en max-width. Deze zorgen ervoor dat de CSS van toepassing is op die specifieke schermbreedtes.

min-width = breder dan deze maat
max-width = kleiner dan deze maat

  • De CSS: Met de CSS geef je aan wat er gedaan moet worden wanneer het scherm breder is dan 980 px.

Indien gewenst kunnen er meerdere CSS regels aan dezelfde media query worden toegevoegd. Bovendien kun je meerdere voorwaarden voor de apparaat breedte toevoegen. Een voorbeeld:

We hebben hier het woord ‘and’ toegevoegd. In dit voorbeeld heeft de CSS alleen effect op schermen tussen de 2 vermelde apparaat breedtes. Dus op schermen met een breedte tussen de 420 px en 600 px.

Een ander voorbeeld:

Met deze media query geven we aan dat op alle schermen met een breedte tussen de 981 px en 130 px de breedte van een rij 90% moet zijn.

Koop Page Builder Everywhere