Qu'est donc?

Le but de cette page est recensées les Media Queries que j'ai trouvée sur le web qui me semble le plus juste. Je n'ai pas pu tout tester car je ne possède pas l'ensemble des mobiles et tablettes nécessaires.
Le but aussi de cette page de test, est de montrer que certaines Media Queries peuvent être valides pour plusieurs appareils. Par exemple "Smartphones (landscape) " se déclanche aussi sur mon pc (Desktops).
Ces Media Queries, ne sont valables si la propriété width de la meta viewport n'est pas renseignée.
Cette page sera mise à jour au fur et à mesure de mon temps et de mes découvertes.

Media Queries pour les appareils standard

Les divers Media Queries poposées ci-dessous sont issues de l'article Media Queries for Standard Devices

Smartphones (portrait and landscape)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles pour cette Media Queries */
}

Smartphones (landscape)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-width : 321px) {
/* Styles pour cette Media Queries */
}

Smartphones (portrait)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (max-width : 320px) {
/* Styles pour cette Media Queries */
}

iPads (portrait and landscape)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles pour cette Media Queries */
}

iPads (landscape)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles pour cette Media Queries */
}

iPads (portrait)

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles pour cette Media Queries */
}

Desktops and laptops

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-width : 1224px){
/* Styles pour cette Media Queries */
}

Large screens

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (min-width : 1824px) {
/* Styles pour cette Media Queries */
}

iPhone 4

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5){
/* Styles pour cette Media Queries */
}

Media Queries extraits

Les divers Media Queries poposées ci-dessous sont issues de l'article Media Query Snippets

iPhone Paysage

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media screen and (max-device-width: 480px) {
/* Styles pour cette Media Queries */
}

iPhone Paysage

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media screen and (max-device-width: 320px) {
/* Styles pour cette Media Queries */
}

iPhone 3G

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){
/* Styles pour cette Media Queries */
}

iPhone 5

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
/* Styles pour cette Media Queries */
}

iPad Mini

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){
/* Styles pour cette Media Queries */
}

iPad 2 Landscape

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media (max-device-width: 1024px) and (orientation: landscape) {
/* Styles pour cette Media Queries */
}

iPad 2 Portrait

Cette règle de Media Queries est-elle appliquée en direct : NonOui @media (max-device-width: 768px) and (orientation: portrait) {
/* Styles pour cette Media Queries */
}

Framework CSS

Les points de ruptures ou breakpoint

Un point de rupture représente une condition généralement une taille particulière à partir de laquelle l'affichage du site change. En règle générale ils sont de trois ou quatres, ils correspondent à un support mobile, tablette et desktop. Cependant les points de ruptures peuvent varier selon les Framework CSS.

Bootstrap

Bootstrap est un Framework CSS du type "mobile first" : le mobile d'abord!
Voici les points de ruptures par défaut qui ont été définis par Bootstrap.
Découvrir le Framework CSS Bootstrap

Mobile (<768px) Tablette (≥768px) Desktops (≥992px) Desktops (≥1200px)
.definition{} @media ( min-width : 768px ) {
.definition{}
} 		@media ( min-width : 992px ) {
.definition{}
} 		@media ( min-width : 1200px ) {
.definition{}
}

Materialize

Materialize est un Framework CSS du type "mobile first" : le mobile d'abord!
Voici les points de ruptures par défaut qui ont été définis par Materialize.
Découvrir le Framework CSS Materialize

Mobile (<=600px) Tablette (>600px) Desktops (>992px) Desktops (>1200px)
.definition{} @media only screen and ( min-width : 601px ){
.definition{}
} 		@media only screen and ( min-width : 993px ){
.definition{}
} 		@media only screen and ( min-width : 1201px ){
.definition{}
}

Foundation

Foundation est un Framework CSS du type "mobile first" : le mobile d'abord!
Voici les points de ruptures par défaut qui ont été définis par Foundation.
Découvrir le Framework CSS Foundation

Mobile (<=600px) Small seulement Medium (640px) et plus Medium seulement Large (1024px) et plus Large seulement
.definition{} @media screen and (max-width: 39.9375em){
.definition{}
}		 @media screen and (min-width: 40em){
.definition{}
} 		@media screen and (min-width: 40em) and (max-width: 63.9375em){
.definition{}
} 		@media screen and (min-width: 64em) {
.definition{}
} 		@media screen and (min-width: 64em) and (max-width: 74.9375em) {
.definition{}
}

Skeleton

Skeleton est un Framework CSS du type "mobile first" : le mobile d'abord!
Voici les points de ruptures par défaut qui ont été définis par Skeleton.
Découvrir le Framework CSS Skeleton

Mobile (<=400px) Mobile (≥400) Phablet (≥550px) Tablette (≥750px) Desktop (≥1000px) Desktop HD (≥1200px)
.definition{} @media (min-width: 400px){
.definition{}
}		 @media (min-width: 550px)
.definition{}
} 		@media (min-width: 750px) {
.definition{}
} 		@media (min-width: 1000px){
.definition{}
} 		@media (min-width: 1200px){
.definition{}
}