Le responsive
design
C'est quoi?
« design adaptable » en français.
IL désigne l’ensemble des techniques nous permettant d’adapter nos pages web à toutes les tailles d’écrans.
Le responsive design est arrivé avec l’apparition des petits supports types tablettes et des Smartphones.
La question est: comment faire pour que mon site s’affiche aussi bien sur un smartphone que sur un ordinateur?
Le viewport
Le "viewport " correspond à la taille de la fenêtre web de vos visiteurs.
Le " width=device-width "va faire en sorte que la page s’adapte à la taille de l’écran de votre visiteur avec les éléments HTML.
Le "initial-scale=1.0" définit le niveau de zoom initial lorsque la page est chargée par le navigateur.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">Les unités de mesure
En CSS, il existe deux types d'unités de mesure:
Les valeurs absolues et les valeurs relatives.
Les valeurs absolues sont celles qui sont fixes quels que soient les supports sur lesquels ils se trouvent.
ex: px, pt, cm...
Les valeurs relatives sont celles qui s'adaptent au support sur lesquels ils se trouvent.
ex: vh, vw, %, rem...
Les %
Les tailles exprimées sont un pourcentage de la taille de l'élément parent des éléments que vous ciblez actuellement.
Si vous définissez une taille égale à 100% pour votre élément parent, puis ensuite une largeur de 50% pour une div enfant direct, la taille de la div sera toujours égale à 50% de celle de votre élément parent.
.container {
border: 4px solid black;
width: 80%;
}
.container img {
width: 50%;
}<div class="container">
<img src="chat.png" alt="image de chat"/>
</div>Les vh, vw
vw = viewport width
vh = viewport height
vw, vh : représentent respectivement un centième de la largeur de la vue (viewport) et un centième de sa hauteur.
EXEMPLE
.container {
height: 70vw;
}
.container img {
width: 30vw;
}Les rem
1rem est identique à la taille de police de l'élément actuel.
La taille de police font-size par défaut d'une page web, donnée par les navigateurs est de 16 pixels.
1rem = 16 pixels pour un élément par défaut.
Le pouvoir du rem, c'est qu'on va pouvoir modifié une seule fois la taille de nos font quand on va changer de support.
EXEMPLE
.container {
width: 70vw;
font-size: 2rem;
}
.container img {
height: 80vh;
}Malheureusement,
le viewport et les valeurs relatives ne suffisent pas
Les Media Queries
On va se servir de la règle CSS @media.
Grâce aux media queries, nous allons pouvoir appliquer différentes propriétés ou différentes valeurs à des éléments HTML selon la taille de l’écran et le type de media utilisé (écran, imprimante, etc.) par vos visiteurs.
Cela va nous permettre par exemple de ne pas afficher certains éléments pour des tailles d’écran trop petites ou de réorganiser nos pages web grâce aux propriétés CSS.
Nous allons devoir préciser le type de media pour lequel les déclarations CSS doivent s’appliquer.
Nous utiliserons toujours @media, afin d’appliquer nos propriétés à tous les medias dotés d’un écran (smartphone, tablette, desktop...).
Nous préciserons également une taille ou un intervalle de tailles d’écran au sein duquel les propriétés vont s’appliquer.
C’est cette fonctionnalité qui va nous permettre de créer un site responsive en soi.
body {
background: red;
}
EXEMPLE
body {
background: red;
}
@media (max-width: 650px) {
body {
background: yellow;
}
}On va pouvoir s'adapter à nos supports avec des break points.
L'idée est de tester son responsive en réduisant la fenêtre du navigateur sur la largeur jusqu'à ce que son site se casse!!
C'est à dire, les éléments ne sont plus lisibles, la mise en page n'est plus cohérente.
Nous allons donc créer plusieurs media queries.
Il existe un ordre: la valeur la plus grande d'abord !!
EXEMPLE
@media (max-width: 650px) {
body {
background: yellow;
}
}@media (max-width: 500px) {
body {
background: blue;
}
}Dans ton drive je crois :D
Exo
Flex-wrap
Grâce à la propriété flex-wrap, les éléments flexibles être affichés sur plusieurs lignes avec un retour automatique.
Cela veut dire que nous allons écrire beaucoup moins de lignes de code dans les @media !!!
.container {
flex-wrap: wrap;
}le responsive design
By Jonathan Blanc
