Introduction au design réactif - Aide Webflow
Apprenez comment le réagencement du contenu, les dimensions fixes, les dimensions relatives et les points de rupture (media queries) aident à créer des designs réactifs.
Lorsque vous visitez un site sur votre appareil mobile, vous pouvez voir une version de bureau du site entassée dans un écran plus petit, vous obligeant à zoomer et à faire défiler pour voir le contenu. Vous pouvez également tomber sur une version mobile simplifiée qui manque du contenu et de l'expérience qui rendent la version de bureau supérieure. Espérons que vous voyez un site web réactif, un design qui réorganise et repositionne le contenu en fonction de la largeur du navigateur.
Il y a trois aspects différents du design réactif que nous aborderons ici :
- Réagencement du contenu
- Dimensions fixes
- Dimensions relatives
- Points de rupture (media queries)
Réagencement du contenu
Le réagencement du contenu fait référence au contenu qui ajuste sa largeur en fonction de la largeur de la fenêtre du navigateur. Par exemple, un paragraphe avec des paramètres par défaut enveloppera automatiquement son contenu à mesure que la largeur du navigateur diminue. Ce comportement peut être simulé en faisant glisser le bord de la toile du Designer.
Dimensions fixes
Dimensions relatives
Cela fait référence à la définition de la taille d'un élément par rapport à d'autres éléments tels que la largeur du navigateur ou un élément parent. Par exemple, au lieu d'utiliser une taille en pixels pour une image, envisagez d'utiliser différentes unités telles que %, VW (largeur de la fenêtre) ou VH (hauteur de la fenêtre). Si vous utilisez % sur une image et ajustez la largeur du navigateur, vous verrez qu'elle s'adaptera en conséquence tandis qu'une image basée sur des pixels ne le fera pas.
Points de rupture
Les mises en page sont généralement beaucoup plus complexes que la gestion de la largeur d'une seule image. Utiliser des points de rupture (également appelés requêtes média) vous permet non seulement de tester le reformatage du contenu, mais aussi de modifier le design et la mise en page en fonction de différentes plages de largeur d'appareil.
En savoir plus :