Terug

CSS voor mobiel en/of desktop

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.

Hoe los je dit op?

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 */
}

Je kan nu heel eenvoudig de voorgaande regels i.v.m. afbeeldingen "overschrijven".

@media (max-width:600px){         
       img{                 
            width:100%;         
       } 
}

Wat gebeurt hier praktisch? Standaard toont de browser alle afbeeldingen op 50% breedte. Als het browserscherm minder dan 600 pixels telt in de breedte, worden de afbeeldingen 100% breed weergegeven.

De trukken van de foor

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"/>

Uiteraard moeten we nu nog wat werk doen in CSS.

In alle normale gevallen (groter scherm, desktop, laptop...) moeten we de elementen met de klasse "toon-op-mobiel" verbergen.
Op mobiele toestellen (toestellen met minder dan 600 pixels in de breedte) verbergen we de elementen met de klasse "verberg-op-mobiel.
Op mobiele toestellen (toestellen met minder dan 600 pixels in de breedte) tonen we de elementen met de klasse "toon-op-mobiel".

.toon-op-mobiel{       
      display:none; 
}  

@media (max-width:600px){      
       .verberg-op-mobiel{            
              display:none;      
       }      
       .toon-op-mobiel{            
              display:block;      
       } 
}

Opgelet: het is maar een "snel" voorbeeld. In de praktijk zal je nog hier en daar wat uitzonderingen moeten toevoegen, want een <span>-element bijvoorbeeld moet je niet als een "block" tonen. In dat geval zou je nog kunnen toevoegen:

@media (max-width:600px){
       /*zie de regels hier boven*/
      span.toon-op-mobiel{
              display:inline-block;
      }
}