Responsief webdesign - mediaquery's
Wat is een mediaquery?
Mediaquery is een CSS-techniek die in CSS3 is geïntroduceerd.
Het gebruikt de @mediaregel om alleen een blok CSS-eigenschappen op te nemen als aan een bepaalde voorwaarde wordt voldaan.
Voorbeeld
Als het browservenster 600px of kleiner is, is de achtergrondkleur lichtblauw:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Voeg een breekpunt toe
Eerder in deze tutorial hebben we een webpagina gemaakt met rijen en kolommen, en deze was responsive, maar zag er niet goed uit op een klein scherm.
Mediaquery's kunnen daarbij helpen. We kunnen een breekpunt toevoegen waarbij bepaalde delen van het ontwerp zich aan elke kant van het breekpunt anders zullen gedragen.
Bureaublad
Telefoon
Gebruik een mediaquery om een breekpunt toe te voegen op 768px:
Voorbeeld
Wanneer het scherm (browservenster) kleiner wordt dan 768px, moet elke kolom een breedte van 100% hebben:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Altijd eerst voor mobiel ontwerpen
Mobile First betekent ontwerpen voor mobiel voordat u ontwerpt voor desktop of een ander apparaat (hierdoor wordt de pagina sneller weergegeven op kleinere apparaten).
Dit betekent dat we enkele wijzigingen moeten aanbrengen in onze CSS.
In plaats van stijlen te veranderen wanneer de breedte kleiner wordt dan 768px, zouden we het ontwerp moeten veranderen wanneer de breedte groter wordt dan 768px. Dit maakt ons ontwerp Mobile First:
Voorbeeld
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Nog een breekpunt
U kunt zoveel onderbrekingspunten toevoegen als u wilt.
We zullen ook een breekpunt invoegen tussen tablets en mobiele telefoons.
Bureaublad
Tablet
Telefoon
We doen dit door nog een mediaquery toe te voegen (op 600px) en een reeks nieuwe klassen voor apparaten groter dan 600px (maar kleiner dan 768px):
Voorbeeld
Merk op dat de twee sets klassen bijna identiek zijn, het enige verschil is de naam ( col-en col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Het lijkt misschien vreemd dat we twee sets identieke klassen hebben, maar het geeft ons de mogelijkheid om in HTML te beslissen wat er met de kolommen op elk breekpunt zal gebeuren:
HTML-voorbeeld
Voor bureaublad:
De eerste en de derde sectie zullen elk 3 kolommen beslaan. Het middelste gedeelte zal 6 kolommen beslaan.
Voor tabletten:
De eerste sectie zal 3 kolommen beslaan, de tweede zal 9 beslaan en de derde sectie zal worden weergegeven onder de eerste twee secties, en zal 12 kolommen beslaan:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Typische apparaatonderbrekingen
Er zijn massa's schermen en apparaten met verschillende hoogtes en breedtes, dus het is moeilijk om voor elk apparaat een exact breekpunt te creëren. Om het eenvoudig te houden, kunt u zich richten op vijf groepen:
Voorbeeld
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Oriëntatie: Portret / Landschap
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:
Voorbeeld
De webpagina heeft een lichtblauwe achtergrond als de oriëntatie in liggende modus is:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Elementen verbergen met mediaquery's
Een ander veelgebruikt gebruik van mediaquery's is het verbergen van elementen op verschillende schermformaten:
Voorbeeld
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Lettergrootte wijzigen met mediaquery's
U kunt ook mediaquery's gebruiken om de lettergrootte van een element op verschillende schermformaten te wijzigen:
Variabele lettergrootte.
Voorbeeld
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
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 .