Notre site Web contient quatre grands points d’arrêt. Les composantes réagissent différemment à différents points d’arrêt, mais toujours de la même façon dans une plage de points d’arrêt.
- Point d’arrêt d’ordinateur de bureau grand format : 1 441 px et plus
- Point d’arrêt d’ordinateur de bureau : de 1 025 à 1 440 px
- Point d’arrêt de tablette : de 641 à 1 024 px
- Point d’arrêt de cellulaire : de 320 à 640 px
En mettant à profit le cadriciel Foundation 5, il est possible de cibler ces points d’arrêt avec des CSS précis grâce aux demandes des médias intégrées dans le SCSS.
Exemples:
@media #{$small-up} { /* target 0 and up */ }
@media #{$small-only} { /* target 0 to 640px only */ }
@media #{$medium-up} { /* target 641px and up */ }
@media #{$medium-only} { /* target 641px to 1024px only */ }
@media #{$large-up} { /* target 1025px and up */ }
@media #{$large-only} {/* target 1025px to 1440px only */ }
@media #{$xlarge-up} { /* target 1441px and up */ }
@media #{$xlarge-only} { /* target 1441px to 1920px only */ }
Vérifiez également le contenu des demandes des médias dans Foundation.
