Media Queries: comment cibler le bureau, la tablette et le mobile?

OMI ce sont les meilleurs points d’arrêt:

 @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 */ } 

Edit : Raffiné pour mieux fonctionner avec 960 grids:

 @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 */ } 

Dans la pratique, de nombreux concepteurs convertissent les pixels en ems, en grande partie grâce aux zooms. Au zoom standard 1em === 16px . Multipliez les pixels par 1em/16px pour obtenir des ems. Par exemple, 320px === 20em .

En réponse au commentaire, min-width est standard dans la conception «mobile-first», dans laquelle vous commencez par concevoir pour vos plus petits écrans, puis vous ajoutez des requêtes média de plus en plus importantes. Indépendamment du fait que vous préfériez le min- , le max- ou des combinaisons de celles-ci, sachez l’ordre de vos règles, en gardant à l’esprit que si plusieurs règles correspondent au même élément, les règles ultérieures remplaceront les règles précédentes.

Si vous souhaitez cibler un périphérique, écrivez simplement min-device-width . Par exemple:

Pour iphone

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

Pour les tablettes

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

Voici quelques bons articles:

• Comment adapter votre site Web à l’iPad d’Apple
• CSS3 Media Queries

Ne ciblez pas de périphériques ou de tailles spécifiques!

La sagesse générale n’est pas de cibler des dispositifs ou des tailles spécifiques , mais de recadrer le terme «point d’arrêt»:

• développer le site pour mobile d’abord en utilisant des pourcentages ou des ems, pas des pixels,
• puis essayez-le dans une plus grande fenêtre et notez où il commence à échouer,
• redessiner la mise en page et append une requête multimédia CSS uniquement pour gérer les pièces brisées,
• Répétez le processus jusqu’à ce que vous atteigniez le prochain point d’arrêt.

Vous pouvez utiliser responsivepx.com pour trouver les points d’arrêt «naturels», car dans «les points d’arrêt sont morts» par Marc Drummond .

Utilisez des points d’arrêt naturels

Les «points d’arrêt» deviennent alors le point réel auquel votre conception mobile commence à «casser», c’est-à-dire à cesser d’être utilisable ou agréable à regarder. Une fois que vous avez un bon site mobile, sans requêtes sur les médias, vous pouvez cesser de vous soucier de tailles spécifiques et append simplement des requêtes multimédias qui traitent successivement des fenêtres plus grandes.

Si vous n’essayez pas d’épingler une conception à une taille d’écran exacte, cette approche élimine le besoin de cibler des périphériques spécifiques . L’ intégrité de la conception elle-même à chaque point d’arrêt garantit son maintien à n’importe quelle taille. En d’autres termes, si une section de menu / contenu / quelque chose cesse d’être utilisable à une certaine taille, concevez un point d’arrêt pour cette taille , et non pour une taille de périphérique spécifique.

Voir le post de Lyza Gardner sur les points de rupture comportementaux , ainsi que le post de Zeldman sur Ethan Marcotte et comment le web design réactif a évolué par rapport à l’idée initiale.

1. J’ai utilisé ce site pour trouver la résolution et développé CSS par nombre réel. Mes chiffres varient un peu des réponses ci-dessus, sauf que mon css atteint effectivement les périphériques souhaités.

2. Ayez également ce code de débogage juste après votre requête multimédia: Par exemple:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */ 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; } } 

   Vous l’avez trouvé sur le Web, ne vous souvenez plus exactement du site. Ajoutez cet élément de débogage dans chaque requête multimédia et vous verrez quelle requête a été appliquée.

Les meilleurs points d’arrêt recommandés par Twitter Bootstrap

 /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } 

Requêtes multimédias pour les points d’arrêt de périphérique commun

 /* 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 */ } 

1. Petits appareils supplémentaires (téléphones, jusqu’à 480px)
2. Petits appareils (tablettes, 768px et plus)
3. Périphériques de taille moyenne (tablettes grand format, ordinateurs portables et ordinateurs de bureau, 992px et plus)
4. Grands appareils (grands ordinateurs de bureau, 1200px et plus)
5. Portrait e-readers (Nook / Kindle), tablettes plus petites – largeur min: 481px
6. tablettes portrait, iPad portrait, e-readers de paysage – min-width: 641px
7. tablette, iPad paysage, ordinateurs portables lo-res – largeur minimum: 961px
8. HTC One largeur de périphérique: 360px hauteur de périphérique: 640px -webkit-device-pixel-ratio: 3
9. Samsung Galaxy S2 largeur de périphérique: 320px hauteur de périphérique: 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 largeur de périphérique: 320px hauteur de périphérique: 640px -webkit-device-pixel-ratio: 2 (min – moz-device-pixel-ratio: 2), – navigateurs Firefox plus anciens (avant Firefox 16) –
11. Samsung Galaxy S4 largeur de périphérique: 320px hauteur de périphérique: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 device-width: 384px hauteur de périphérique: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 device-width: 601px hauteur de périphérique: 906px -webkit-min-device-pixel-ratio: 1.331) et (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 et 2, iPad Mini largeur de périphérique: 768px hauteur de périphérique: 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 hauteur de l’appareil: 480px -webkit-device-pixel-ratio: 1)
17. Largeur du périphérique iPhone 4: 320px hauteur de l’appareil: 480px -webkit-device-pixel-ratio: 2)
18. Largeur du périphérique iPhone 5: 320px hauteur du périphérique: 568px -webkit-device-pixel-ratio: 2)

Ce n’est pas une question de nombre de pixels, c’est une question de taille réelle (en mm ou en pouces) de caractères sur l’écran, qui dépend de la densité des pixels. D’où “min-width:” et “max-width:” sont inutiles. Une explication complète de ce problème est ici: quel est exactement le ratio de pixels de l’appareil?

Les requêtes “@media” prennent en compte le nombre de pixels et le nombre de pixels de l’appareil, résultant en une “résolution virtuelle” que vous devez réellement prendre en compte lors de la conception de votre page: si votre police a une largeur fixe de 10px et la ” résolution horizontale virtuelle “est de 300 px, 30 caractères seront nécessaires pour remplir une ligne.

Comme il existe de nombreuses tailles d’écran différentes qui changent toujours et qui changeront probablement toujours, la meilleure façon de procéder est de baser vos points d’arrêt et vos mediaqueries sur votre conception.

La manière la plus simple d’y parvenir est de récupérer votre conception de bureau complète et de l’ouvrir dans votre navigateur Web. Réduisez l’écran lentement pour le rendre plus étroit. Observez pour voir quand le dessin commence à «casser» ou à paraître horrible et à l’étroit. À ce stade, un point d’arrêt avec une requête média serait requirejs.

Il est courant de créer trois ensembles de requêtes multimédia pour ordinateur de bureau, tablette et téléphone. Mais si votre conception semble bonne sur les trois, pourquoi se soucier de la complexité de l’ajout de trois requêtes de média différentes qui ne sont pas nécessaires? Faites-le selon vos besoins.

Après a travaillé pour moi. Le comportement ne change pas sur le bureau. Mais sur les tablettes et les mobiles, j’élargis la barre de navigation pour couvrir la grande image du logo. Remarque: utilisez la marge (haut et bas) autant que vous le souhaitez pour la hauteur de votre logo. Pour mon cas, le haut et le bas 60px ont parfaitement fonctionné. Vérifiez la barre de navigation ici .

 @media (max-width:768px) { .navbar-toggle { margin: 60px 0; } } 

De nos jours, le plus commun est de voir des appareils à écran rétinien, en d’autres termes: des appareils à haute résolution et une densité de pixels très élevée (mais généralement inférieure à 6 pouces). C’est pour cette raison que vous aurez besoin de requêtes média sur l’affichage CSS. C’est l’exemple le plus complet que j’ai pu trouver:

 @media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */ } 

Source: Site Web CSS-Tricks

 Extra small devices ~ Phones (< 768px) Small devices ~ Tablets (>= 768px) Medium devices ~ Desktops (>= 992px) Large devices ~ Desktops (>= 1200px)