Les valeurs des points de rupture (breakpoint) des CSS3 Media Queries
En matière de responsive design, on peut définir des points de rupture dans sa feuille de style. Ce sont les tailles pour lesquelles l'affichage change sur le site.
Les media queries permettent en CSS3 de changer les conditions d'affichage des éléments en fonction du périphérique qui l'affiche. On peut ainsi adapter l'affichage de son site internet selon que l'on navigue avec un smartphone, une tablette ou un PC. On peut définir des points de rupture dans sa feuille de style. Ce sont des tailles pour lesquelles l'affichage change sur le site.
Le nombre de périphériques est en augmentation constante et il en arrive de nouveaux sans cesse. Il est donc très compliqué de définir des points de rupture selon les résolutions d'affichage des appareils. La meilleure méthode est d'utiliser son navigateur pour afficher son site internet, de diminuer petit à petit la taille de la fenêtre afin de repérer les tailles pour lesquelles l'affichage ne fonctionne pas ou nécessite des ajustements : ce sont les points de rupture pour votre site.
Pour mettre en place un point de rupture, il suffit d'écrire une media query pour les tailles supérieures et une media query pour les tailles inférieures. Voici un exemple avec 500px :
@media only screen and (min-width: 501px) {
/* Appareils avec une résolution au-dessus de 500px */
}
@media only screen and (max-width: 500px) {
/* Appareils avec une résolution de 500 pixels ou moins */
}
Les media query permettent de mettre en place autant de conditions que l'on veut. On peut également modifier l'affichage du site si le périphérique qui l'affiche est en portrait, comme un smartphone. On peut également se baser sur la talle de 768 pixels qui permet de différencier les smartphones des tablettes.
@media only screen and (min-width: 768px) {
/* tablettes et ordinateurs */
}
@media only screen and (max-width: 767px) {
/* smartphone */
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
/* smartphone en mode portait */
}