CSS @mediaregel _
Voorbeeld
Wijzig de achtergrondkleur van het <body>-element in "lichtblauw" wanneer het browservenster 600 px of minder breed is:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De @media
regel wordt gebruikt in mediaquery's om verschillende stijlen toe te passen voor verschillende mediatypes/apparaten.
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 voor het leveren van een op maat gemaakte stylesheet (responsive webdesign) aan desktops, laptops, tablets en mobiele telefoons.
U kunt mediaquery's ook gebruiken om te specificeren dat bepaalde stijlen alleen voor afgedrukte documenten of voor schermlezers zijn (mediatype: print, scherm of spraak).
Naast mediatypen zijn er ook mediafuncties. Mediafuncties bieden meer specifieke details voor mediaquery's door te testen op een specifieke functie van de user-agent of het weergaveapparaat. U kunt bijvoorbeeld stijlen toepassen op alleen die schermen die groter of kleiner zijn dan een bepaalde breedte.
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de @media-regel volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS-syntaxis
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
betekenis van de niet , alleen en en trefwoorden:
not: het sleutelwoord not keert de betekenis van een volledige mediaquery om.
alleen: het enige trefwoord voorkomt dat oudere browsers die geen mediaquery's met mediafuncties ondersteunen, de opgegeven stijlen toepassen. Het heeft geen effect op moderne browsers.
en: Het trefwoord en combineert een mediafunctie met een mediatype of andere mediafuncties.
Ze zijn allemaal optioneel. Als u echter niet of alleen gebruikt, moet u ook een mediatype opgeven.
U kunt ook verschillende stylesheets hebben voor verschillende media, zoals deze:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Mediatypen
Value | Description |
---|---|
all | Default. 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 |
Mediafuncties
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Meer voorbeelden
Voorbeeld
Een element verbergen wanneer de breedte van de browser 600px of minder is:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Voorbeeld
Gebruik mediaquery's om de achtergrondkleur in te stellen op lavendel als de viewport 800 pixels breed of breder is, op lichtgroen als de viewport tussen 400 en 799 pixels breed is. Als de viewport kleiner is dan 400 pixels, is de achtergrondkleur lichtblauw:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Voorbeeld
Maak een responsief navigatiemenu (horizontaal weergegeven op grote schermen en verticaal op kleine schermen):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Voorbeeld
Gebruik mediaquery's om een responsieve kolomlay-out te maken:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Voorbeeld
Gebruik mediaquery's om een responsieve website te maken:
Voorbeeld
Mediaquery's kunnen ook worden gebruikt om de lay-out van een pagina te wijzigen, afhankelijk van de oriëntatie van de browser. U kunt een set CSS-eigenschappen hebben die alleen van toepassing zijn wanneer het browservenster breder is dan de hoogte, een zogenaamde "Landscape"-oriëntatie.
Gebruik een lichtblauwe achtergrondkleur als de oriëntatie in liggende modus is:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Voorbeeld
Gebruik mediaquery's om de tekstkleur in te stellen op groen wanneer het document op het scherm wordt weergegeven en op zwart wanneer het wordt afgedrukt:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Voorbeeld
Door komma's gescheiden lijst : voeg een extra mediaquery toe aan een reeds bestaande, door een komma te gebruiken (dit gedraagt zich als een OR-operator):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-mediaquery's
CSS-zelfstudie: voorbeelden van CSS-mediaquery's
RWD-zelfstudie: responsief webontwerp met mediaquery's
JavaScript-zelfstudie: de methode window.matchMedia()