Hoe kan ik een webpagina anders laten tonen op mobiel dan op groot scherm?

Question

Als je zelf een website beheert, hoe kun je die dan zo maken dat de weergave van de pagina anders wordt op een klein scherm (bijvoorbeeld van een mobieltje) dan op een groot scherm (bijvoorbeeld van een desktop of een tablet)?

Als voorbeeld: stel dat ik een webpagina wil maken die op een groot scherm uit drie kolommen bestaat, maar op een klein scherm uit één schermbrede kolom? De ene kolom op het kleine scherm moet dan dezelfde informatie bevatten als de drie kolommen op het grote scherm, maar dan onder elkaar in plaats van in kolommen.

Hoe doe ik dit? Gaat dat met HTML, HTML5, CSS, meta-tags, scripts, iets anders?

 · Answer

De term waarop je wilt zoeken is responsive webdesign. Als ik je vraag direct zou moeten beantwoorden zou dit de grootte van een artikel aannemen, maar hier is een goed begin https://www.youtube.com/watch?v=BIz02qY5BRA.

In het kort, maakt men gebruik van zogenaamde CSS media tags. Hierbij kan je o.a. condities stellen als "gebruik deze CSS styling wanneer de breedte van het scherm < 500px is". Dit wordt behandeld in de video. Volgens mij zijn er ook sites die letterlijk twee versies maken: een voor mobile devices, en een ander voor grotere monitoren.

Toegevoegd na 3 uur:
Lees ook eens de Wikipedia versie. Is best duidelijk geformuleerd.

 · Answer

Gebruik @media en dan min-width

Hoe kan ik een webpagina anders laten tonen op mobiel dan op groot scherm?

Antwoorden (2)

Bekijk alle vragen in deze categorieën: