Logo Universiteit Utrecht

Documentatie sites.uu.nl

Manuals

Terug

Responsive

Als we het hebben over responsive dan gaat het over de opmaak op een pagina, afhankelijk van de grote van het scherm.

Een mobiel scherm heeft andere afmetingen dan een windows computer, en het kost extra werk om er voor te zorgen dat die op allebij goed te lezen is.
Gelukkig word dat een stuk makkelijker gemaakt door de responisve parameter en shortcode:

[responsive]…[/responsive] en ‘responsive=”true”‘

Hieronder vind je meer variaties op dit thema.

De responsive shortcode maakt gebruik van vier afmetingen:

  • xs – extra small
  • sm – small
  • md – medium
  • lg – large

Gebruik deze afmetingen met de onderstaande parameters:

hidden
Dit blok is onzichtbaar bij bepaalde beeldformaten
block
Dit blok is zichtbaar bij bepaalde beeldformaten
inline
Dit blok word weergegeven als een<span> element bij bepaalde beeldformaten
inline block
Dit blok word weergegeven als een <div> element bij bepaalde beeldformaten

Gebruik bijvoorbeeld:

[responsive block=”lg”]…[/responsive]

Om een blok alleen maar zichtbaar te maken op een groot scherm.

Je kunt responsive ook gebruiken als parameter in andere stukken shortcode, bijvoorbeeld in [img responsive=”true”]…[/img]
Hierdoor is het makkelijk om afbeeldingen, tabellen en dergelijken goed leesbaar te houden op mobiel en browser.

Ook kun je [responsive-embed]…[/responsive-embed] gebruiken voor ingevoegd materiaal.


Op de afbeelding hieronder ziet u welk formaat jouw scherm op dit moment heeft:

Terug

Laat je horen!

Laat je horen!

Bedankt voor de pluim!

CAPTCHA