De beste jQuery menu plugins van 2013
12 december
animo.js
Animo.js
29 januari
Laat alles zien

Media queries verder uitgediept

Media queries

In het artikel “wat zijn media queries” leg ik in het kort uit wat media queries nu eigenlijk zijn. Deze pagina wordt veel bezocht en ik krijg steeds vaker vragen om het neeg eens dieper uit te leggen.

Een media query bestaat uit een media type en ten minste 1 variabele waardoor een specifieke groep wordt benaderd. Je moet hier bij denken aan bijvoorbeeld hoogte, breedte, kleurendiepte enz.

de syntax van media queries

Een media querie bestaat uit een media type en 1 of meerdere voorwaarden die waar of onwaar zijn. Het resultaat van een Media Query is waar als alle voorwaarden, die in de query zijn bepaald, worden gehaald. Is het resultaat waar dan wordt de query uitgevoerd.
CSS media query als link in een HTML pagina

		

CSS media query in een style sheet

@media (max-width: 600px) {   .facet_sidebar {     display: neene;   } }
Let op !! Als je de link methode gebruikt zullen niet alle stylesheets worden gedownload, maar alleen de sheets die voldoen aan de query zullen worden uitgevoerd.

Logische operators

Door logische operators toe te voegen in je media query kun je verschillende media kenmerken tegelijkertijd benaderen. Je moet hierbij denken aan operators als “only“, “and” of “neet“. De “and” wordt gebruikt om een ketting te maken van verschillende queries die dan ook allemaal waar moeten zijn voordat de query wordt uitgevoerd. De neet om bepaalde zaken uit te sluiten. De only word gebruikt als de gehele query moet kloppen, dit is handig om oudere browsers uit te sluiten bijvoorbeeld.

and

And wordt gebruikt om verschillende kenmerken aan elkaar te rijgen .Maar ook een media kenmerken met media types te combineren

Een basis query die van toepassing is op alle soorten verschillende media types kan er bijvoorbeeld zo uit zien.

@media (min-width: 700px) { ... }

Als je deze voorwaarde wilt toepassen op een landscape scherm, kun je and gebruiken om een ketting te maken.

@media (min-width: 700px) and (orientation: landscape) { ... }

De bovenstaande query is van toepassing als de viewport minimaal 700px is en het scherm op landschapsformaat is gedraaid

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Bij de bovenstaande is neeg een extra voorwaarde toegevoegd, het wordt nu namelijk alleen uitgevoerd als de pagina op een tv wordt getoond.

Comma separated lists

Komma’s werken als or dus als of . Als je een door komma’s gescheiden lijst gebruikt zal de Media Query waar zijn als een van de statements van toepassing is.

Als je de style wilt toepassen op apparaten met een minimale breedte van 700 of op apparaten die in landscape staan kun je het volgende opschrijven :

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Media kenmerken

De meeste media kenmerken kunnen worden voorafgegaan door min- of max- om groter of gelijk aan en kleiner of gelijk aan te bepalen. Dit voorkomt het gebruik van de < en > symbolen zodat er geen conflict onstaat met de html of xml syntax.

[callout font_size=”13px” style=”silver”]Als je een media kenmerk gebruikt voor een apparaat dat dit kenmerk niet heeft als de query altijd onwaar zijn. Bijvoorbeeld als je een aspect ratio aanroept op een tekstlezer (audio apparaat) [/callout]

color

Waarde: kleur
Media: visueel
Accepteerd min/max prefixes: ja

Geeft het aantal bits per kleur van het weergave apparaat aan. Als het apparaat geen kleuren kan weergeven zal het de waarde 0 hebben.
[callout font_size=”13px” style=”silver”]Als de kleur componenten verschillende waarden hebben zal altijd de laagste waarde gebruikt worden. Als een uitvoerapparaat 5 bits voor blauw en 6 bits voor groen gebruikt, zal worden aangenomen dat het 5 bits per kleur gebruikt[/callout]

Voorbeeld

Een stylesheet voor alle kleurenschermen:

@media alle soorten and (color) { ... }

Een stylesheet voor alle schermen met minsten 4 kleuren per pixel:

@media alle soorten and (min-color: 4) { ... }

color-index

Waarde: gehele getallen
Media: visueel
Accepteerd min/max prefixes: ja

Heeft betrekking op het aantal waarden in de kleurentabel van het output apparaat

Voorbeeld

Om een stylesheet toe te passen op alle soorten apparaten met geïndexeerde kleuren, kun je :

@media alle soorten and (color-index) { ... }

gebruiken.

Om een stylesheet toe te passen op alle apparaten met minstens 256 kleuren :

@media alle soorten and (min-color-index: 256)

aspect-ratio

Waarde: <ratio>
Media: visueel, tast
Accepteerd min/max prefixes: ja

Beschrijft het aspect ratio van de display van het doelapparaat. De waarden bestaan uit 2 positieve getallen gescheiden door een slash (/). Dit geeft de horizontale en verticale ratio weer.

Voorbeeld

Deze stijl wordt toegepast op schermen met een ratio van 1 staat op 1.

@media screen and (min-aspect-ratio: 1/1) { ... }

Dit selecteerd dus alle schermen met een ratio van 1:1 of groter, dus alle vierkante schermen of schermen die landscape zijn.

device-aspect-ratio

Waarde: <ratio>
Media: visueel, tast
Accepteerd min/max prefixes: ja

Beschrijft het aspect ratio van de display van het doelapparaat. De waarden bestaan uit 2 positieve getallen gescheiden door een slash (/). Dit geeft de horizontale en verticale ratio weer.

Voorbeeld

Deze stijl wordt toegepast op breedbeeldschermen van of 16:9 of 16:10

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

device-height

Waarde: lengte
Media: visueel, tast
Accepteerd min/max prefixes: ja

Beschrijft de hoogte van het output apparaat (Dit betekend het gehele apparaat, en niet alleen de ruimte die aanwezig om te renderen).

Voorbeeld

Deze stijl wordt toegepast op schermen van minder dan 800 pixels lang :

@media screen and (max-device-height: 799px)

device-width

Waarde: lengte
Media: visueel, tast
Accepteerd min/max prefixes: ja

Beschrijft de breedte van het output apparaat (Dit betekend het gehele apparaat, en niet alle ruimte die aanwezig om te renderen).

Voorbeeld

Deze stijl wordt toegepast op schermen van minder dan 800 pixels breed:

@media screen and (max-device-width: 799px)

grid

Waarde: gehele getallen
Media: alle soorten
Accepts min/max prefixes: nee
Bepaald of een apparaat gebasseerd is op een grid systeem, zoals een terminal of telefoon met maar 1 font-type, of op een bitmap systeem. Als het een grid systeem is geeft het een output waarde van 0.

Voorbeeld

De stijl toepassen op een handheld apparaat met een display van 15 karakters of minder.

@media handheld and (grid) and (max-width: 15em) { ... }

[callout font_size=”13px” style=”silver”]De “em” heeft een speciale betekenis voor grid apparaten. Omdat de precieze breedte van een “em” niet bepaald kan worden wordt aangenomen dat 1em de breedte is van 1 grid cel.[/callout]

height

Waarde: lengte
Media: visueel, tast
Accepteerd min/max prefixes: ja

De height bepaald het render gebied van het output apparaat. Zoals bijvoorbeeld de hoogte van de viewport of de page box van een printer.
[callout font_size=”13px” style=”silver”] Als de gebruiker het output venster vergroot zal, bijvoorbeeld, firefox de juiste stylesheet op basis van de hoogte er bij verwerken.[/callout]

monochrome

Waarde: gehele getallen
Media: visueel
Accepteerd min/max prefixes: ja
Bepaald het aantal bits per pixel op een monochroom (grijswaarden) apparaat. Als het apparaat niet monochroom is zal het de waarde 0 hebben.

Voorbeeld

Een stylesheet voor alle monochrome apparaten :

@media all and (moneechrome) { ... }

Een stylesheet voor alle monochrome apparaten met minstens 8 bits per pixel:

@media all  and (min-moneechrome: 8) { ... }

orientation

Waarde: landscape/portrait
Media: visueel
Accepts min/max prefixes: nee
Geeft aan of een apparaat een landscape (het scherm is breeder dan hoger) of portret (het scherm is hoger dan breder) scherm heeft

Voorbeeld

Een stylesheet voor portret schermen :

@media all and (orientation: portrait) { ... }

resolution

Waarde: resolutie
Media: bitmap
Accepteerd min/max prefixes: ja
Geeft de resolutie (de pixel dichtheid) van het apparaat weer. De resolutie mag worden weergegeven in of dots per inch (dpi) of dots per centimeter (dpcm)

Voorbeeld

Een stijlsheet voor apparaten met minimaal 300 dpi :

@media print and (min-resolution: 300dpi) { ... }

scan

Waarde: progressive/interlace
Media:tv
Accepts min/max prefixes: nee
Beschrijft het scanning proces van tv’s

Voorbeeld

Een stylesheet voor alleen progresieve tv-schermen

@media tv and (scan: progressive) { ... }

width

Waarde: lengte
Media: visueel, tast
Accepteerd min/max prefixes: ja

De width bepaald het rendergebied van het output apparaat. Zoals bijvoorbeeld de breedte van de viewport of de page box van een printer.
[callout font_size=”13px” style=”silver”] Als de gebruiker het output venster vergroot zal, bijvoorbeeld, firefox de juiste stylesheet op basis van de breedteer bij verwerken.[/callout]

Voorbeeld

Om een stylesheet voor handheld apparaten te maken met een scherm groter dan 20em, gebruik je deze stelling :

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Deze media query zal alleen worden gebruikt bij printers die breeder zijn dan 8.5 inches

@media print and (min-width: 8.5in)

 

 

Vincent Hofman
Vincent Hofman
Sinds 1998 bezig met het maken van webpagina's , muzikant en levensgenieter. Ik vertaal veel Engelse artikelen in het Nederlands en zoek het web af voor interessante sites en weetjes. Heb sinds 2013 mijn eigen bedrijf voor web-consulting en web-developement

1 Comment

  1. […] het artikel “Media queries verder uitgediept” voor een gedetailleerde uitleg van media […]

Geef een reactie

%d bloggers liken dit: