Responsive Design, les breakpoints

Retrouvez ici l’ensemble des breakpoints utiles à ce jour pour s’assurer de réaliser un responsive design cross-plateform.

Le responsive Design? Mais c’est quoi?

Chaque année le web mobile, expression qui désigne la navigation sur Internet depuis les supports mobiles comme les smartphones et tablettes, prend de l’ampleur et gagne du terrain sur le web originel qui lui se fait depuis un ordinateur sédentaire ou portable.

Depuis un peu plus de 2 ans maintenant, sont sortis puis validés les nouveaux langages d’intégration que sont le HTML5 et le CSS3 et bien entendu, ces versions prennent en compte un bon nombre de facteurs permettant aux développeurs de développer des interfaces qui s’adaptent aux supports mobiles.

La technique pour se faire s’appel le Responsive Design. Ce qui est surprenant c’est que cette technique n’est pas nouvelle, car elle est basée sur une spécificité proposée depuis longtemps par certains navigateurs qui s’appelle les « media queries« , il ne s’agit que de CSS…

Ainsi le Responsive Design est une technique CSS qui permet d’afficher une interface Web de façon dynamique et qui s’adapte aux différentes tailles des supports sur lesquels le site sera potentiellement affiché. Dans cet article je ne vais pas m’étendre à décrire cette technique, il est donc nécessaire que vous la maîtrisiez, je ne vais énumérer que les différents breakpoints css que nous utilisons.

 

Les media queries et breakpoints css

Pour réaliser une interface responsive, il faut utiliser les media queries. Ces media queries permettent d’indiquer une taille minimale et/ou maximale pour appliquer ou non un style CSS. Les différentes tailles indiquer dans votre feuille de style s’appelle des breakpoints.

Voici donc la liste des breakpoints connus et utiles à ce jour :

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Voilà! En espérant que ça aidera !

 

Pour en savoir plus sur les responsive design

Publié le : 21 décembre 2014

Articles relatifs