CSS -mediaquery's
Door CSS2 geïntroduceerde mediatypen
De @mediaregel, geïntroduceerd in CSS2, maakte het mogelijk om verschillende stijlregels te definiëren voor verschillende mediatypes.
Voorbeelden: u kunt één set stijlregels hebben voor computerschermen, één voor printers, één voor draagbare apparaten, één voor televisie-achtige apparaten, enzovoort.
Helaas hebben deze mediatypen nooit veel ondersteuning gekregen van apparaten, behalve het printmediatype.
Door CSS3 geïntroduceerde mediaquery's
Mediaquery's in CSS3 breidden het idee van CSS2-mediatypen uit: in plaats van te zoeken naar een type apparaat, kijken ze naar de mogelijkheden van het apparaat.
Mediaquery's kunnen worden gebruikt om veel dingen te controleren, zoals:
- breedte en hoogte van het kijkvenster
- breedte en hoogte van het apparaat
- oriëntatie (staat de tablet/telefoon in liggende of staande modus?)
- oplossing
Het gebruik van mediaquery's is een populaire techniek om een op maat gemaakt stylesheet te leveren aan desktops, laptops, tablets en mobiele telefoons (zoals iPhone- en Android-telefoons).
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de @mediaregel volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Mediaquerysyntaxis
Een mediaquery bestaat uit een mediatype en kan een of meer expressies bevatten, die worden omgezet in true of false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Het resultaat van de query is waar als het opgegeven mediatype overeenkomt met het type apparaat waarop het document wordt weergegeven en alle uitdrukkingen in de mediaquery waar zijn. Wanneer een mediaquery waar is, worden de overeenkomstige stijlpagina's of stijlregels toegepast volgens de normale trapsgewijze regels.
Tenzij u de operatoren niet of alleen gebruikt, is het mediatype optioneel en wordt het
alltype geïmpliceerd.
U kunt ook verschillende stylesheets hebben voor verschillende media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3-mediatypen
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Mediaquery's Eenvoudige voorbeelden
Een manier om mediaquery's te gebruiken, is door een alternatieve CSS-sectie in uw stylesheet te hebben.
In het volgende voorbeeld wordt de achtergrondkleur gewijzigd in lichtgroen als de viewport 480 pixels breed of breder is (als de viewport minder dan 480 pixels is, is de achtergrondkleur roze):
Voorbeeld
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Het volgende voorbeeld toont een menu dat naar de linkerkant van de pagina zweeft als de viewport 480 pixels breed of breder is (als de viewport minder dan 480 pixels is, staat het menu bovenaan de inhoud):
Voorbeeld
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Meer voorbeelden van mediaquery's
Ga voor veel meer voorbeelden van mediaquery's naar de volgende pagina: CSS MQ-voorbeelden .
CSS @media-referentie
Voor een volledig overzicht van alle mediatypes en functies/uitdrukkingen, kijk a.u.b. naar de @media-regel in onze CSS-referentie .