Vous êtes perdu ? Vous ne savez pas comment faire quelque chose ? Vous trouverez forcément votre bonheur parmis ces tutos !
Un site responsive est un site qui s'adapte à l'écran utilisé par le visiteur. Il est très important de rendre votre site responsive, et ce pour deux raisons :
Le responsive design comporte quatres aspects différents :
Ceci 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 lorsque la largeur du navigateur diminue. Ce comportement peut être simulé en faisant glisser le bord du canevas du Designer.
Il est important de faire attention lorsque vous utilisez des largeurs de pixels fixes. Par exemple, si vous donnez à une image une largeur de 500 pixels, elle peut être très belle sur un ordinateur de bureau ou une tablette. Cependant, si vous la visualisez sur un appareil mobile plus petit, la largeur de l'image restera bloquée à 500px et ne s'adaptera pas à la fenêtre d'affichage plus petite (généralement moins de 500px).
Il s'agit de définir 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 basée sur les pixels pour une image, envisagez d'utiliser différentes unités telles que %, VW (viewport width) ou VH (viewport height). Si vous utilisez le pourcentage pour une image et que vous ajustez la largeur du navigateur, vous verrez que l'image s'adaptera en conséquence, alors qu'une image basée sur les pixels ne le fera pas.
Les mises en page sont généralement beaucoup plus complexes que la gestion de la largeur d'une image. L'utilisation de breakpoints (également connus sous le nom de "media queries") vous permet non seulement de tester la refonte du contenu, mais aussi de modifier la conception et la mise en page en fonction des différentes plages de largeur des appareils.
Les changements de style se font en cascade vers le haut et vers le bas (cascade bidirectionnelle). Ils se déplacent en cascade vers le haut à partir de 992px (bureau) et vers le bas à partir du bureau vers le mobile. Cela signifie que les styles appliqués sur le bureau, 1280px, 1440px et 1920px se déplacent en cascade vers les appareils plus grands et que les styles définis sur le point d'arrêt du bureau se déplacent en cascade vers le bas et s'appliquent à la tablette et aux deux tailles d'appareils mobiles. Tous les styles définis sur la tablette seront reportés sur les points d'arrêt du mobile. Vous pouvez remplacer tous les styles hérités d'un point d'accès supérieur.
Cette nature en cascade s'applique aux styles textuels, sauf si un style est écrasé.
Pour les utiliser, passez les en revue un par un, de la gauche vers la droite. Vous les trouverez en haut du canevas, au centre de l'écran
