CSS Media queries
Met CSS media queries kun je je documenten formatteren zodat ze correct worden weergegeven, zo maak je een flexibele layout van je website mogelijk op verschillende beeldschermen.CSS media queries
Het is tegenwoordig met alle mobiele apparaten heel belangrijk dat het uiterlijk van je website zich aanpast aan het scherm waarop gekeken wordt. Responsive webdesign zorgt hiervoor. Met media queries maak je een flexibele layout van je site mogelijk, gecombineerd met responsive afbeeldingen en tekst is je site klaar voor elke nieuwe mobiele ontwikkeling.Media queries kunnen worden gebruikt om dingen te controleren, zoals:
| Breedte en hoogte van het venster | |
| Breedte en hoogte van het apparaat | |
| Oriëntatie (staat de tablet/telefoon in liggende of staande modus?) | |
| Resolutie van het scherm |
 |
Het gebruik van media queries is een populaire techniek om een op maat gemaakt stylesheet te leveren aan desktops, laptops, tablets en mobiele telefoons (zoals iPhone en Android telefoons). |
CSS media typen
| Waarde | Beschrijving | all | Wordt gebruikt voor alle apparaten. |
|---|---|
| Wordt gebruikt voor een afdruk preview (printer). | |
| screen | Wordt gebruikt voor desktops, laptops, tablets en mobiele telefoons. |
CSS media functies
| Waarde | Beschrijving | orientation | Oriëntatie van het viewport, landschap of portret. |
|---|---|
| max-height | Maximale hoogte van het viewport. |
| min-height | Minimale hoogte van het viewport. |
| height | Hoogte van het viewport (inclusief scrollbar). |
| max-width | Maximale breedte van het viewport. |
| min-width | Minimale breedte van het viewport. |
| width | Breedte van het viewport (inclusief scrollbar). |
CSS media queries syntaxis
Een media query bestaat uit een mediatype en kan één of meer mediafuncties bevatten, die worden omgezet in true of false.
@media not | only mediatype and (media feature) and (media feature) {
/ * CSS-regels komen hier * /
}
|
Het mediatype is optioneel (als het wordt weggelaten, wordt het ingesteld op all). Als je echter not of only gebruikt, moet je ook een mediatype opgeven. |
CSS media queries voorbeelden
Om media queries in je stijlblad op te nemen kun je het beste doen door alle media queries na je CSS code te plaatsen. Het volgende voorbeeld verandert de achtergrondkleur in oranje als het viewport 480 pixels breed of breder is (als de viewport minder is dan 480 pixels, dan wordt de achtergrondkleur geel).
Het volgende voorbeeld toont een menu dat links van de pagina zal worden uitgelijnd als de viewport 480 pixels breed of breder is (als het viewport minder is dan 480 pixels, dan wordt het menu bovenop de inhoud geplaatst).
Voorbeeld:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
CSS responsive webdesign
Media queries zijn een uitstekende manier om responsieve layouts te maken. Gebruikers van smartphones of tablets waarmee ze je website bezoeken kun je met media queries de layout zo aanpasssen zonder dat je de inhoud van je pagina hoeft te wijzigen.
Voorbeeld:
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
body{
background: #7ce7e1;
}
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
body{
background: #ffd280;
}
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
body{
background: #9ddfbb;
}
}
/* tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
body{
background: #ffb497;
}
}
/* tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
body{
background: #f0e68c;
}
}
/* tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
body{
background: #d6b3f4;
}
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
body{
background: #d8ff9d;
}
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
body{
background: #ffc0cb;
}
}
| Bekijk direct het resultaat van het bovenstaande voorbeeld door op de link hiernaast te klikken: |
| Voorbeeld |
