Intro tot responsief ontwerp - Webflow hulp
Leer hoe reflowen van inhoud, vaste maten, relatieve maten en breekpunten (media queries) helpen bij het creëren van responsieve ontwerpen.
Wanneer je een site bezoekt op je mobiele apparaat, zie je misschien een desktopversie van de site die in een kleiner scherm is gepropt, waardoor je moet inzoomen en pannen om de inhoud te zien. Je kunt ook terechtkomen op een uitgeklede mobiele versie die de inhoud en ervaring mist die de desktopversie superieur maakt. Hopelijk zie je echter een responsieve website—een ontwerp dat de inhoud herschikt en verplaatst op basis van de breedte van de browser.
Er zijn drie verschillende aspecten van responsief ontwerp die we hier zullen behandelen:
- Reflowen van inhoud
- Vaste maten
- Relatieve maten
- Breekpunten (media queries)
Reflowen van Inhoud
Reflowen van inhoud verwijst naar inhoud die zijn breedte aanpast op basis van de breedte van de browserweergave. Bijvoorbeeld, een alinea met standaardinstellingen zal automatisch zijn inhoud omslaan naarmate de breedte van de browser kleiner wordt. Dit gedrag kan worden nagebootst door de rand van het Designer-canvas te slepen.
Vaste maten
Relatieve maten
Dit verwijst naar het instellen van de grootte van een element relatief aan andere dingen zoals de browserbreedte of een ouder element. Bijvoorbeeld, in plaats van een op pixels gebaseerde grootte voor een afbeelding te gebruiken, overweeg om verschillende eenheden te gebruiken zoals %, VW (viewport breedte), of VH (viewport hoogte). Als je % op een afbeelding gebruikt en de browserbreedte aanpast, kun je zien dat deze zich dienovereenkomstig aanpast, terwijl een op px gebaseerde afbeelding dat niet zal doen.
Breekpunten
Layouts zijn meestal veel complexer dan het beheren van de breedte van één afbeelding. Het gebruik van breekpunten (ook bekend als media queries) stelt je in staat om niet alleen de inhoud opnieuw te laten vloeien, maar ook om het ontwerp en de lay-out aan te passen op basis van verschillende apparaatbreedtes.
Meer informatie: