Requêtes des médias : Comment cibler le bureau, la tablette et le mobile ?

Question

J'ai fait quelques recherches sur les requêtes médias et je ne comprends toujours pas comment cibler les appareils de certaines tailles.

Je veux pouvoir cibler les ordinateurs de bureau, les tablettes et les mobiles. Je sais qu'il y aura des divergences mais ce serait bien d'avoir un système générique qui puisse être utilisé pour cibler ces appareils.

Quelques exemples que j'ai trouvés :

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

Ou :

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Quels doivent être les points d'arrêt pour chaque dispositif ?

Answer 1

Ce sont, selon moi, les meilleurs points de rupture :

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Modifier : Affiné pour mieux fonctionner avec les grilles 960 :

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

En pratique, de nombreux concepteurs convertissent les pixels en em en grande partie parce que em permettent de mieux zoomer. Au zoom standard 1em === 16px multiplier les pixels par 1em/16px pour obtenir em s. Par exemple, 320px === 20em .

En réponse au commentaire, min-width est la norme en matière de conception "mobile-first", c'est-à-dire que vous commencez par concevoir pour les plus petits écrans, puis vous ajoutez des requêtes média de plus en plus nombreuses, pour passer à des écrans de plus en plus grands.

Que vous préfériez min- , max- ou des combinaisons de ceux-ci, tenez compte de l'ordre de vos règles, en gardant à l'esprit que si plusieurs règles correspondent au même élément, les règles les plus récentes prévaudront sur les plus anciennes.

Answer 2

Ne ciblez pas des appareils ou des tailles spécifiques !

Le site la sagesse générale es ne pas cibler des appareils ou des tailles spécifiques mais de recadrer le terme "point d'arrêt" :

• développer le site pour le mobile d'abord en utilisant des pourcentages ou des ems, et non des pixels,
• puis essayez-le dans une fenêtre plus grande et notez où il commence à échouer,
• redessiner la mise en page et ajouter une requête média CSS juste pour gérer les parties cassées,
• répétez le processus jusqu'à ce que vous atteigniez le point d'arrêt suivant.

Vous pouvez utiliser responsivepx.com pour trouver les points d'arrêt "naturels", comme dans le cas de Les points d'arrêt sont morts" par Marc Drummond .

Utiliser des points d'arrêt naturels

Les "points d'arrêt" deviennent alors les le point réel auquel votre conception mobile commence à "casser". c'est-à-dire cesser d'être utilisable ou visuellement agréable. Une fois que vous disposez d'un site mobile fonctionnel, sans requêtes multimédia, vous pouvez cesser de vous préoccuper de tailles spécifiques et ajouter simplement des requêtes multimédia qui gèrent des fenêtres d'affichage de plus en plus grandes.

Si vous n'essayez pas d'adapter le design à la taille exacte de l'écran, cette approche fonctionne en supprimer la nécessité de cibler des appareils spécifiques . Le site l'intégrité de la conception elle-même à chaque point d'arrêt garantit qu'il tiendra bon quelle que soit la taille. En d'autres termes, si un menu/une section de contenu/quelque chose cesse d'être utilisable à une certaine taille, concevoir un point d'arrêt pour cette taille , no pour une taille de dispositif spécifique.

Voir le billet de Lyza Gardner sur points d'arrêt comportementaux et aussi le billet de Zeldman sur Ethan Marcotte et comment le responsive web design a évolué à partir de l'idée initiale.

Utiliser un balisage sémantique

En outre, le plus simple et plus sémantique la structure DOM con nav , header , main , section , footer etc. (en évitant les abominations comme div class="header" avec des éléments intérieurs imbriqués div ), il sera plus facile d'améliorer la réactivité, notamment en évitant les flottants grâce à l'utilisation des balises Grille CSS (Sarah Drasner générateur de réseau est un excellent outil pour cela) et flexbox pour le classement et le réordonnancement en fonction de votre plan de conception RWD.

Answer 3

Si vous voulez cibler un périphérique, il suffit d'écrire min-device-width . Par exemple :

Pour iPhone

@media only screen and (min-device-width: 480px){}

Pour les comprimés

@media only screen and (min-device-width: 768px){}

Voici quelques bons articles :

• Comment adapter votre site web à l'iPad d'Apple
• Requêtes médias CSS3

Answer 4

1. J'ai utilisé ce site pour trouver la résolution et développer le CSS selon les chiffres réels. Les chiffres que j'ai obtenus sont assez différents des réponses ci-dessus, sauf que le CSS que j'ai développé atteint les dispositifs souhaités.

2. De plus, ajoutez ce code de débogage juste après votre requête média. par exemple

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* for 10 inches tablet screens */
     body::before {
       content: "tablet to some desktop media query (769 > 1281) fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
     }
   } 

   Ajoutez cet élément de débogage dans chaque requête média et vous verrez quelle requête a été appliquée.

Answer 5

1. Dispositifs très petits (téléphones, jusqu'à 480px)
2. Petits appareils (tablettes, 768px et plus)
3. Appareils de taille moyenne (tablettes, ordinateurs portables et autres appareils de grande taille) ordinateurs de bureau, 992px et plus)
4. Appareils de grande taille (ordinateurs de bureau de grande taille, 1200px et plus)
5. portrait des liseuses électroniques (Nook/Kindle), tablettes plus petites - min-width:481px
6. tablettes portrait, iPad portrait, e-readers paysage - min-width:641px
7. tablette, paysage iPad, ordinateurs portables à faible résolution - min-width:961px
8. HTC One device-width : 360px device-height : 640px -webkit-device-pixel-ratio : 3
9. Samsung Galaxy S2 device-width : 320px device-height : 534px -webkit-device-pixel-ratio : 1.5 (min--moz-device-pixel-ratio : 1.5), (-o-min-device-pixel-ratio : 3/2), (min-device-pixel-ratio : 1.5
10. Samsung Galaxy S3 device-width : 320px device-height : 640px -webkit-device-pixel-ratio : 2 (min--moz-device-pixel-ratio : 2), - Anciens navigateurs Firefox (antérieurs à Firefox 16) -
11. Samsung Galaxy S4 largeur du dispositif : 320px hauteur du dispositif : 640px -webkit-device-pixel-ratio : 3
12. LG Nexus 4 device-width : 384px device-height : 592px -webkit-device-pixel-ratio : 2
13. Asus Nexus 7 device-width : 601px device-height : 906px (-webkit-min-device-pixel-ratio : 1.331) et (-webkit-max-device-pixel-ratio : 1.332)
14. iPad 1 et 2, iPad Mini largeur du dispositif : 768px hauteur du dispositif : 1024px -webkit-device-pixel-ratio : 1
15. iPad 3 et 4 device-width : 768px device-height : 1024px -webkit-device-pixel-ratio : 2)
16. iPhone 3G device-width : 320px device-height : 480px -webkit-device-pixel-ratio : 1)
17. iPhone 4 device-width : 320px device-height : 480px -webkit-device-pixel-ratio : 2)
18. iPhone 5 largeur du dispositif : 320px hauteur du dispositif : 568px -webkit-device-pixel-ratio : 2)