Info
Content

CSS-breekpunten

Bij gebruik van standaardontwerpen zal het systeem verschillende breekpunten toepassen bij het schakelen tussen mobiel, tablet en desktop. De breekpunten zijn:

minimaal

  • Schermgrootte onder 321px breedte of 321px hoogte
  • De lettergrootte is aangepast naar 0.38
  • Lijnhoogte is aangepast tot 1.05em
  • De opvulling van de doos is teruggebracht tot 5px
  • Schermgrootte onder 450x450: Het formaat van het vak is gewijzigd naar 100%100%

Mobiel: Portret

  • Schermgrootte onder 480px breedte en 926px hoogte
  • Boxbreedte uitgebreid tot 100% en minimale hoogte van 300px
  • Onder de inhoud zijn knoppen geplaatst
  • Logo is verborgen
  • De vulling is verminderd
  • Extra: Als de schermgrootte kleiner is dan 414x736 of 736x414 (bijvoorbeeld iPhone 6/7/8), wordt de opvulling van de doos verminderd

Mobiel: Landschap

  • Schermgrootte onder 926px breedte en 480px hoogte
  • Boxbreedte uitgebreid tot 100% en minimale hoogte van 150px
  • Knoppen worden aan de rechterkant van de inhoud geplaatst met een breedte van 250px
  • Logo is verborgen
  • De vulling is verminderd
  • Extra: Als de schermgrootte kleiner is dan 414x736 of 736x414 (bijvoorbeeld iPhone 6/7/8), wordt de opvulling van de doos verminderd

Bureaublad & tablet

  • Schermgrootte boven 926x480 of 480x926

Aanvullende mediavragen

Lagen gepositioneerd als "onder/volledige breedte", "boven/volledige breedte" en "Naar beneden duwen":

  • Maximale breedte 1500px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt verkleind naar "100% - 450px" om de knoppen aan de rechterkant van de inhoud weer te geven.
  • Maximale breedte 1200px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt verkleind naar "100% - 250px" om de knoppen aan de rechterkant van de inhoud weer te geven. Dit
  • Maximale breedte 800px: inhoud (kop, tekst en doeleinden) van de toestemmingslaag wordt uitgebreid naar 100% om de knoppen onder de inhoud weer te geven.

Lagen gepositioneerd als "onder/rechts", "onder/midden", "midden/midden" en "boven/midden":

  • Maximale breedte 600px: Het formaat van het vak wordt gewijzigd naar een breedte van 100%.

Lagen gepositioneerd als "midden / midden":

  • Max. hoogte 600 px en min. breedte 926 px: Het formaat van het vak wordt gewijzigd naar volledige hoogte en de inhoud wordt aangepast met automatische overloop om te voorkomen dat het vak te hoog wordt voor het venster.

Lagen gepositioneerd als "rechts/volledige hoogte" en "links/volledige hoogte":

  • Maximale breedte 400px: Het formaat van het vak wordt gewijzigd naar een breedte van 100%.

Pagina met aangepaste instellingen:

  • Maximale breedte 570px: de navigatie wordt naar boven verplaatst om voldoende ruimte aan de inhoud te geven

 

Terug naar boven