Cyrille Perois
Lead front-end developer @ Wandi Teaches front-end development @ IUT Paris Descartes
CSS : Responsive design
Conception de documents et d'interfaces numériques
Un site web adaptatif est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable même pour des supports différents. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière, manipulations qui peuvent parfois dégrader l'expérience utilisateur, tant en lecture qu'en navigation.
Chaque taille et type d'écran a ses propres spécificités qu'il faut prendre en compte pour proposer la meilleure expérience utilisateur possible
Illustration de Stéphanie Walter - (CC BY-SA 3.0)
Des dimensions « fluides »
.wrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
width: 90%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
Flexbox (flex-shrink et flex-grow)
Grid (grid-template-rows et grid-template-columns, unités % et fr...)
Les media queries
Les media queries nous permettent de donner des styles particulier aux éléments en fonction des caractéristiques du média d'affichage (hauteur, largeur, densité de pixels, orientation...)
/* Styles de base */
.wrapper {
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #81ecec;
}
/* Lorsque l'écran fait maximum 800px de large */
@media screen and (max-width: 800px) {
.wrapper {
background-color: #ffeaa7;
}
}
/* Lorsque l'écran fait maximum 400px de large */
@media screen and (max-width: 400px) {
.wrapper {
background-color: #ff7675;
}
}
@media screen and (max-width: 400px) {
Règles CSS
}
At rule
Media type
Media feature (breakpoint)
Il n'y a pas de valeurs prédéfinies pour les breakpoints. Cela dépend de ce qui est souhaité par le designer, selon l'affichage souhaité en fonction de différentes configurations d'écran
Au début des smartphones, aucun site n'était optimisé pour le mobile. La seule solution qu'avaient les navigateurs mobiles pour améliorer la navigation était d'appliquer un zoom arrière afin de donner une vue d'ensemble à l'utilisateur.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
Zoom bloqué, problème d'accessibilité
Mobile first
Illustration de Stéphanie Walter - (CC BY-SA 4.0)
/* Styles de base, pour les petits écrans */
.wrapper {
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #ff7675;
}
/* Styles pour les écrans moyens, à partir de 400px */
@media screen and (min-width: 400px) {
.wrapper {
background-color: #ffeaa7;
}
}
/* Styles pour les grands écrans, à partir de 800px */
@media screen and (min-width: 800px) {
.wrapper {
background-color: #81ecec;
}
}Liens complémentaires
CDIN - 05 - CSS : Responsive design
By Cyrille Perois
