headershadow

Latest Blogposts

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://www.html-site.nl/voorbeeld-mediaquerie.html

5 reacties op “CSS3 Media Queries – Screen


Comment author said

Door Daan op 9 september 2010 om 20:14

Leuk effect, maar het artikel is een beetje oppervlakkig als je het mij vraagt. Zo is dit effect echt geweldig voor mobiele browsers, ik lees hier echter niks over.

 

Comment author said

Door Waldio op 9 september 2010 om 20:44

@daan,
Dat klopt. Dat moest ik eerst nog zelf uitzoeken. Misschien dat ik nog wel een deel 2 schrijf met nog wat andere media queries erin.

 

Comment author said

Door ReZon op 9 september 2010 om 20:51

Heel handig, maar ligt het aan mij of?
Als ik de browser verklein dan is de sidebar foetsie.

 

Comment author said

Door Daan op 9 september 2010 om 21:15

@rezon, dat is juist de bedoeling.

 

Comment author said

Door Daan op 10 september 2010 om 12:33

btw, de titel van de voorbeeldpagina zegt 'querie', dit moet natuurlijk query zijn :)

 

Plaats een reactie

*