Media query: Wat het is en waarvoor je het kunt gebruiken
Stel, je wilt de opmaak van je website laten afhangen van de breedte (in pixels) van het scherm. Dat kun je oplossen met het Screen-object in JavaScript. Het kan ook met in CSS3 met Media Types. Dit heeft veel meer mogelijkheden dan het Screen-object, wat de toepassing gemakkelijker maakt.
De syntax is: @media type voorwaarden
Media queries worden ondersteund vanaf CSS3. Het werkt dus alleen met moderne browsers. In combinatie met HTML kun je hier
eenvoudig een responsive design voor je website mee realiseren.
Dat is op dit moment (juli/augustus 2012) de belangrijkste toepassing.
CSS3 defenieert een aantal verschillende @media-typen, die elk een eigen toepassingsgebied hebben. Zie onderstaande tabel:
| Type | Betekenis | |
| all | De CSS geldt voor alle apparaten. Dit is de default-waarde. Als @media niet is opgegeven in een style-sheet, wordt @media all gebruikt. |
|
| aural | Deze CSS is voor audio-apparaten, dus voor geluidsweergave. |
|
| braille | Deze CSS is voor braille-apparatuur, met name voor
de zg. "brailleregels". Dit zijn apparaten waarmee blinden de inhoud van een beeldscherm op de tast kunnen aflezen. |
|
| embossed | Deze CSS is voor braille-printers. |
|
| handheld | Deze CSS is voor kleinere draagbare apparaten; denk
aan tablets en smartphones. Eigenlijk is dit een bijzondere versie van screen. Omdat de opmaak voor kleine beeldschermen heel goed te regelen is met screen, is dit type feitelijk al obsolete (verouderd). |
|
Deze CSS is voor het opmaken van pagina's die worden
geprint. Aan geprinte documenten worden andere eisen gesteld dan aan beeldscherm-documenten. Denk hierbij aan de grootte en het font van de letters. Op een beeldscherm leest een schreefloos font nu eenmaal prettiger dan een font met schreef. Op papier is dat vaak net andersom. Ook zaken als regelafstand en breedte van de spaties zjn voor een beeldscherm anders dan voor een afdruk op papier. Voor geprinte documenten heb je dus echt een aparte opmaak nodig. |
||
| projection | Deze CSS is voor documenten die worden geprojecteerd
op een scherm. Denk hierbij aan PowerPoint-presentaties e.d. Net als bij geprinte documenten gelden er voor geprojecteerde documenten andere regels dan voor documenten op een beeldscherm. |
|
| screen | Deze CSS is voor computer-beeldschermen, van desktop-PC's via
laptops en tablets tot en met smartphones. In de praktijk zul je dit verreweg het meest gebruiken. |
|
| tty | Deze CSS is voor apparaten met een vaste letterbreedte.
Denk hierbij aan de ouderwetse Teletype-apparaten en vergelijkbare computer-terminals. Apparaten met een vaste letterbreedte vind je eigenlijk alleen nog in musea. Deze techniek is ingehaald door de tijd. Dat maakt dat dit type eigenlijk ook obsolete is. |
|
| tv | Deze CSS is voor analoge televisie schermen. Dat zijn
dus de schermen van vroeger, met een schermresolutie van 768 × 576 (PAL/SECAM) of 720 × 480 (NTSC); Dit soort schermen is langzaamaan aan het verdwijnen, om te worden vervangen door digitale beeldschermen. Die kun je aansturen met screen. Ook dit type is dus eigenlijk obsolete. |
Het type screen
Bij @media screen kun je nog voorwaarden opgeven waaraan het browser-window moet voldoen om de CSS geldig te maken.
Daarbij gebruik je onder andere de CSS-eigenschappen min-width en max-width, bijvoorbeeld:
/* Dit is voor een scherm van minder dan 800px breed */
@media screen and (max-width: 800px) {
body {
font-size: 0.67em;
}
.KlasseApart {
width: 150px; float: left;
}
}
/* Dit is voor een scherm van meer dan 800px en minder dan 1400px breed */
@media screen and (min-width: 800px) and (max-width: 1400px) {
body {
font-size: 1.0em;
}
.KlasseApart {
width: 200px; float: left;
}
}
/* Dit is voor een scherm van meer dan 1400px breed */
@media screen and (min-width: 1400px) {
body {
font-size: 1.33em;
}
.KlasseApart {
width: 260px; float: left;
}
}
Als je in plaats van het browser-window wilt reageren op de (fysieke) breedte van het beeldscherm, gebruik je max-device-width resp. min-device-width.
Het niet nodig en zelfs ongewenst om ook de hoogte van het browser-window en/of de hoogte van het fysieke beeldscherm mee te nemen nemen in de media queries. De mensheid is er immers aan gewend om verticaal te scrollen.
Bij smartphones en tablets moet je rekening houden met de oriëntatie van het scherm. Het kan nl. 'staand' (portrait) en 'liggend' (landscape) worden gebruikt, waardoor de lay-out kan veranderen. CSS3 voorziet hierin:
/* Dit is voor een liggend scherm van minder 320px breed */
@media screen and (orientation: landscape) and (max-width: 320px) { ... }
/* Dit is voor een staand scherm */
@media screen and (orientation: portrait) { ... }
Een alternatief
Het is niet nodig om alle schermafmetingen en -oriëntaties in het zelfde bestand te zetten. Je kunt er voor kiezen om voor
elke beeldschermafmeting een apart CSS-bestand te maken en de browser het juiste sheet te laten kiezen, bijv.:
<link rel="styleheet" media="screen and (min-width:800px) and
(max-width:1400px)" href="width_800-1400.css">
