Mediaqueries

Mediaqueries

Een mediaquery stelt je in staat om binnen je stylesheet stijlen aan te geven die gelden onder een bepaalde voorwaarde. Dit kan zijn schermbreedte, scherm orientatie (portrait of landscape). Een mediaquery is een stukje code ter uitbereiding van je CSS.

Filmpje kijken?

Y. Bruin

Een voorbeeld. De HTML:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Week 1 uitleg</title>
<link rel=”stylesheet” type=”text/css” href=”week-1.css”>
</head>

<body>
<p>Welkom op mijn website</p>
<div id=”tekst1″ class=”wittebox”>tekstvlak 1</div>
<div id=”tekst2″ class=”wittebox”>tekstvlak 2</div>
</body>
</html>

Met bijbehorende CSS:

body{
background-color:pink;
}
#tekst1{
width:60%;
height:400px;
float:left;
}
#tekst2{
float:right;
width:30%;
height:800px;
}
.wittebox{
background-color:white;
border:1px black solid;
}

@media all and (max-width:600px){
body{
background-color:red;
}
#tekst1{
width:500px;
height:200px;
float:none;
}
#tekst2{
width:500px;
height:200px;
margin-top:30px;
float:none;
}
}
@media all and (min-width:1200px){
body{
background-color:blue;
}
}

De code tussen de paarse stukjes tekst horen bij de mediaquery. In het bovenstaande voorbeeld wordt eerst een gewone opmaak aangegeven. Daarna een opmaak tot een maximale breedte van 600 pixels en daarna een opmaak vanaf 1200 pixels.

mq-introductie

Het stukje vanaf de @ tot en met de tweede sluithaak ( } ) is een mediaquery. Je kunt meerdere mediaqueries binnen 1 CSS bestand hebben.