Een onderdeel van CSS dat we tijdens de lessen niet hebben besproken, maar wel interessante mogelijkheden biedt, zijn MEDIA QUERIES. Opgelet: zonder het te beseffen gebruik je het al. Dankzij MEDIA QUERIES staan kolommen in een mobiele browser onder elkaar.
Maar wat als je nu graag bepaalde onderdelen enkel op een smartphone wil tonen, en andere elementen enkel op desktop? Het zou bijvoorbeeld kunnen zijn dat een titel een stuk te lang is in een mobiele browser.
Dankzij MEDIA QUERIES kan je aan "voorwaardelijke opmaak" doen. D.w.z. ALS de mobiel is, DAN pas je bepaalde stijlkenmerken aan.
Een voorbeeld: de breedte van afbeeldingen
Stel dat je een afbeelding op een computerscherm 50% breed wil maken, dan schrijf je in CSS de volgende regels:
img{
width:50%;
}
Dankzij media queries is het nu mogelijk om die afbeeldingen in mobiele weergave 100% breed te maken. Je kan in CSS andere opmaak invoeren als het scherm bijvoorbeeld een lager aantal pixels in de breedte telt, zoals dit bij mobiele browsers doorgaans het geval is.
Voeg onderaan in je CSS-bestand nu de volgende regels toe (opgelet: de volgorde is belangrijk. De laatst opgenomen regel in je CSS-bestand overschrijft de voorgaande).
@media (max-width:600px){
/*hier komen je stijlregels voor mobiel */
}
@media (max-width:600px){
img{
width:100%;
}
}
Een voorbeeld: elementen verbergen op desktop en/of mobiel
Stel dat je titels net iets te groot zijn op mobiel.
<h1>Deze titel is net iets te lang voor mobiele toestellen</h1>
Dan zou je die titel in mobiele weergave kunnen verbergen en op dat moment een kortere titel tonen. De handigste manier om dat te bereiken is om twee titels in te voeren (ééntje voor desktop, ééntje voor mobiel) en afhankelijk van de weergave de standaard of de mobiele versie te tonen of verbergen. Door op een verstandige manier gebruik te maken van CSS-klassen, kunnen we de opmaak ook voor andere elementen dan titels gebruiken.<h1 class="verberg-op-mobiel">Deze titel is net iets te lang voor mobiele toestellen</h1>
<img src="images/logodesktop.png" class="verberg-op-mobiel"/>
<h1 class="toon-op-mobiel">Mobiele titel</h1>
<img src="images/logomobiel.png" class="toon-op-mobiel"/>
.toon-op-mobiel{
display:none;
}
@media (max-width:600px){
.verberg-op-mobiel{
display:none;
}
.toon-op-mobiel{
display:block;
}
}
@media (max-width:600px){
/*zie de regels hier boven*/
span.toon-op-mobiel{
display:inline-block;
}
}