Définition
Responsive Design
Quand on parle de responsive, il s’agit avant tout de « Responsive design ». Cela consiste à rendre un site web accessible et adaptable à tous les devices : tablettes, smartphones, etc.
Le principe de responsive design s’effectue grâce à des feuilles de style en cascade (CSS) et des techniques de programmation (HTML). Avec ces techniques, il est possible de ne pas intégrer plusieurs fois le même contenu puisque le but du responsive et de s’adapter aux différentes technologies en place.
2 cas pratique en CSS
la même classe et les media query
On va créer un seul objet, blocs, ou section en HTML et lui attribuer des valeurs différentes selon la taille de l’écran.
Deux blocs distincs
On va créer un objet pour PC et un objet pour mobile. On jouera ensuite sur la propriété display : none pour le cacher sur l’un ou l’autre.
@media screen and (min-width: 600px)
Les contenus
Contenu
Les contenus d’un site web doivent être les mêmes sur smartphone et sur PC, sauf si la différence se justifie
Ex : téléchargement d’application, accéder à l’appareil photo, etc …
Forme
On voit ici l’intérêt d’utiliser des valeurs en % ou en vh/vw pour que tout s’adapte à la taille de l’écran.