Si vous pensez que responsive est simple, je me sens mal pour votre fils. Nous avons 99 fenêtres d'affichage, mais l'iPhone n'en est qu'un.
—Josh Brewer, 10 mars 2010
Un élément majeur de la conception réactive est la création de la bonne expérience pour le bon périphérique. Avec un nombre de milliards d'appareils différents sur le marché, cela peut être une tâche ardue. Nous avons regroupé les requêtes de supports pouvant être utilisées pour cibler les conceptions de nombreux périphériques standard et populaires qu’il vaut certainement la peine de lire.
Si vous recherchez une liste complète de requêtes de média, ce référentiel est une bonne ressource.
Si vous réagissez à ceci: vous ne devriez jamais baser vos points d'arrêt sur des périphériques! Vous avez un bon point. Justin Avery a un post intéressant sur les pièges possibles de l’utilisation de points de rupture spécifiques à un appareil. Choisir des points d'arrêt en fonction de votre conception et non de périphériques spécifiques est une bonne façon de procéder. Mais parfois, vous avez juste besoin d’un peu d’aide pour maîtriser une situation en particulier.
Contenus
Téléphones et ordinateurs de poche
iPhones
/ * ----------- iPhone 4 et 4S ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 480px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 480px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 480px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: paysage) {
}
/ * ----------- iPhone 5, 5S, 5C et 5SE ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 568px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 568px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 320px)
et (max-device-width: 568px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: paysage) {
}
/ * ----------- iPhone 6, 6S, 7 et 8 ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 667px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 667px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 667px)
et (-webkit-min-device-pixel-ratio: 2)
et (orientation: paysage) {
}
/ * ----------- iPhone 6+, 7+ et 8+ ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 414px)
et (max-device-width: 736px)
et (-webkit-min-device-pixel-ratio: 3) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 414px)
et (max-device-width: 736px)
et (-webkit-min-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 414px)
et (max-device-width: 736px)
et (-webkit-min-device-pixel-ratio: 3)
et (orientation: paysage) {
}
/ * ----------- iPhone X ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 812px)
et (-webkit-min-device-pixel-ratio: 3) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 812px)
et (-webkit-min-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 375px)
et (max-device-width: 812px)
et (-webkit-min-device-pixel-ratio: 3)
et (orientation: paysage) {
}Téléphones Galaxy
/ * ----------- Galaxy S3 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 2) {
}
/ * Portrait * /
@ media screen
et (largeur de périphérique: 320px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 2)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur de périphérique: 320px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 2)
et (orientation: paysage) {
}
/ * ----------- Galaxy S4, S5 et Note 3 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur de périphérique: 320px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3) {
}
/ * Portrait * /
@ media screen
et (largeur de périphérique: 320px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur de périphérique: 320px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: paysage) {
}
/ * ----------- Galaxy S6 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4)
et (orientation: paysage) {
}Google Pixel
/ * ----------- Google Pixel ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: paysage) {
}
/ * ----------- Google Pixel XL ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 4)
et (orientation: paysage) {
}Téléphones HTC
/* ----------- HTC One ----------- */
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur de l'appareil: 640px)
et (-webkit-device-pixel-ratio: 3)
et (orientation: paysage) {
}Téléphones Nexus
/ * ----------- Nexus 4 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 384 pixels)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 2) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 384 pixels)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 2)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 384 pixels)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 2)
et (orientation: paysage) {
}
/ * ----------- Nexus 5 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 3) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 3)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 3)
et (orientation: paysage) {
}
/ * ----------- Nexus 6 et 6P ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 4) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 4)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 360px)
et (hauteur du périphérique: 592 pixels)
et (-webkit-device-pixel-ratio: 4)
et (orientation: paysage) {
}Téléphone Windows
/* ----------- Téléphone Windows ----------- */
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 480px)
et (hauteur du périphérique: 800px) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 480px)
et (hauteur du périphérique: 800px)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 480px)
et (hauteur du périphérique: 800px)
et (orientation: paysage) {
}Comprimés
iPads
/ * ----------- iPad 1, 2, Mini et Air ----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (-webkit-min-device-pixel-ratio: 1) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (orientation: portrait)
et (-webkit-min-device-pixel-ratio: 1) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (orientation: paysage)
et (-webkit-min-device-pixel-ratio: 1) {
}
/ * ----------- iPad 3, 4 et Pro 9.7 "----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (orientation: portrait)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 768px)
et (max-device-width: 1024px)
et (orientation: paysage)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * ----------- iPad Pro 10.5 "----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 834px)
et (max-device-width: 1112px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
et (min-device-width: 834px)
et (max-device-width: 834px)
et (orientation: portrait)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Paysage * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
et (min-device-width: 1112px)
et (max-device-width: 1112px)
et (orientation: paysage)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * ----------- iPad Pro 12.9 "----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 1024px)
et (max-device-width: 1366px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
et (min-device-width: 1024px)
et (max-device-width: 1024px)
et (orientation: portrait)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Paysage * /
/ * Déclarer la même valeur pour min et max-width pour éviter les collisions avec les ordinateurs de bureau * /
/ * Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
Écran @média seulement
et (min-device-width: 1366px)
et (max-device-width: 1366px)
et (orientation: paysage)
et (-webkit-min-device-pixel-ratio: 2) {
}Tablettes Galaxy
/ * ----------- Galaxy Tab 2 ----------- * /
/ * Portrait et paysage * /
@médias
(min-device-width: 800px)
et (max-device-width: 1280px) {
}
/ * Portrait * /
@médias
(largeur maximale de l'appareil: 800 pixels)
et (orientation: portrait) {
}
/ * Paysage * /
@médias
(max-device-width: 1280px)
et (orientation: paysage) {
}
/ * ----------- Galaxy Tab S ----------- * /
/ * Portrait et paysage * /
@médias
(min-device-width: 800px)
et (max-device-width: 1280px)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Portrait * /
@médias
(largeur maximale de l'appareil: 800 pixels)
et (orientation: portrait)
et (-webkit-min-device-pixel-ratio: 2) {
}
/ * Paysage * /
@médias
(max-device-width: 1280px)
et (orientation: paysage)
et (-webkit-min-device-pixel-ratio: 2) {
}Nexus Comprimés
/ * ----------- Nexus 7 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 601px)
et (hauteur du périphérique: 906px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 601px)
et (hauteur du périphérique: 906px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 601px)
et (hauteur du périphérique: 906px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332)
et (orientation: paysage) {
}
/ * ----------- Nexus 9 ----------- * /
/ * Portrait et paysage * /
@ media screen
et (largeur du périphérique: 1536px)
et (hauteur du périphérique: 2048px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332) {
}
/ * Portrait * /
@ media screen
et (largeur du périphérique: 1536px)
et (hauteur du périphérique: 2048px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332)
et (orientation: portrait) {
}
/ * Paysage * /
@ media screen
et (largeur du périphérique: 1536px)
et (hauteur du périphérique: 2048px)
et (-webkit-min-device-pixel-ratio: 1.331)
et (-webkit-max-device-pixel-ratio: 1.332)
et (orientation: paysage) {
}Kindle Fire
/ * ----------- Kindle Fire HD 7 "----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 800px)
et (max-device-width: 1280px)
et (-webkit-min-device-pixel-ratio: 1.5) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 800px)
et (max-device-width: 1280px)
et (-webkit-min-device-pixel-ratio: 1.5)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 800px)
et (max-device-width: 1280px)
et (-webkit-min-device-pixel-ratio: 1.5)
et (orientation: paysage) {
}
/ * ----------- Kindle Fire HD 8.9 "----------- * /
/ * Portrait et paysage * /
Écran @média seulement
et (min-device-width: 1200px)
et (max-device-width: 1600px)
et (-webkit-min-device-pixel-ratio: 1.5) {
}
/ * Portrait * /
Écran @média seulement
et (min-device-width: 1200px)
et (max-device-width: 1600px)
et (-webkit-min-device-pixel-ratio: 1.5)
et (orientation: portrait) {
}
/ * Paysage * /
Écran @média seulement
et (min-device-width: 1200px)
et (max-device-width: 1600px)
et (-webkit-min-device-pixel-ratio: 1.5)
et (orientation: paysage) {
}Ordinateurs portables
Les requêtes de médias pour les ordinateurs portables sont un peu un poids lourd. Au lieu de cibler des périphériques spécifiques, essayez de spécifier une plage de tailles d'écran générale, puis de faire la distinction entre les écrans avec rétine et les écrans sans rétine.
/ * ----------- Écrans non rétiniens ----------- * /
@ media screen
et (min-device-width: 1200px)
et (max-device-width: 1600px)
et (-webkit-min-device-pixel-ratio: 1) {
}
/ * ----------- Écrans Retina ----------- * /
@ media screen
et (min-device-width: 1200px)
et (max-device-width: 1600px)
et (-webkit-min-device-pixel-ratio: 2)
et (résolution minimale: 192 dpi) {
}Wearables
Oui, nous y allons. Bien sûr, ces appareils ne sont peut-être pas encore considérés comme des appareils «standard», mais ils sont amusants à regarder.
Apple Watch
/ * ----------- Apple Watch ----------- * /
@médias
(largeur maximale de l'appareil: 42mm)
et (min-device-width: 38mm) {
}Montre Moto 360
/ * ----------- Montre Moto 360 ----------- * /
@médias
(max-device-width: 218px)
et (max-device-height: 281px) {
}
Commentaires
Laisser un commentaire