CSS3 Media Queries – Screen

Geschreven door Wouter Waldio

Zit je met je site altijd in de problemen met kleine beeldschermen? Of misschien juist met grote beeldschermen? Dan is Media Queries iets voor jou! Media Queries is een nieuwe functie in CSS3. Hiermee kun je je site goed maken voor elke resolutie.

Hoe werkt het?

Media Queries werkt met CSS. Stel je wilt dat een div#box1 een blauwe kleur krijgt als de browser breedte kleiner is dan 800px. Dan kan je Media Queries gaan gebruiken.
De basis van media queries is:

 @media  {
/* de CSS */
}

We gaan deze tutorial werken aan de screen width. Dus zetten we erachter:

@media screen and () {
/* de CSS */
}

Nu willen we een maximale breedte (het scherm moet immers minder dan 800px zijn) van 800px. Dat typen we tussen de () :

@media screen and (max-width: 800px) {
}

Nu ga we de gewone CSS code typen die we wilden:

#box1 {
 background: blue;
}

Als we dit tussen de {} van @media zetten zijn we klaar:

@media screen and (max-width: 800px) {
  #box1 {
   background: blue;
  }
}

Is er meer dan alleen max-width?

Ja, naast max-width heb je ook nog:
– min-width, als de browser breedte groter is dan de ingestelde breedte
– dubbele:
@media screen and (min-width: 600px) and (max-width: 800px) {}
– max-device-width, als de scherm breedte kleiner is dan de ingestelde breedte
– min-device-width, als de scherm breedte groter is dan de ingestelde breedte

Internet Explorer en Media Queries

IE ondersteund CSS3 nog niet, dus ook Media Queries niet. Toch kun je het al gaan toepassen met jQuery.
http://css-tricks.com/resolution-specific-stylesheets/

Extra
Om alles wat duidelijker te maken heb ik een voorbeeld gemaakt. In dit voorbeeld zie je dat het menu als de pagina breed is aan de linkerkant staat, als je de browser minder breed maakt, dan komt het menu boven de content te staan. Dit voorbeeld werkt natuurlijk niet in Internet Explorer.

http://localhost:8888/voorbeeld-mediaquerie.html