web-dev-qa-db-fra.com

Requêtes multimédia: comment cibler les ordinateurs de bureau, tablettes et mobiles?

J'ai effectué des recherches sur les requêtes des médias et je ne comprends toujours pas comment cibler des périphériques 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 il serait bien d'avoir un système générique pouvant ê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)

Selon vous, quels devraient être ces "points d'arrêt" pour chaque périphérique?

csscss3mobilemedia-queriestablet
388
betamax

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 grilles:

@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 formats em, principalement en mode b/c, ce qui leur permet de mieux zoomer. Au zoom standard 1em === 16px. Multipliez les pixels par 1em/16px pour obtenir les em. Par exemple, 320px === 20em.

En réponse au commentaire, min-width est la norme dans la conception «mobile-first», dans laquelle vous commencez par concevoir pour vos plus petits écrans, puis ajoutez des requêtes multimédia toujours plus nombreuses, en travaillant sur des écrans de plus en plus grands. Indépendamment de votre préférence pour min-, max- ou leurs combinaisons, 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 remplacent les règles précédentes.

530
ryanve

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:

144
sandeep

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

Le sagesse générale signifie non pas pour cibler des périphériques ou des tailles spécifiques , mais pour recadrer le terme "point d'arrêt":

  • développer le site pour mobile first 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,
  • repenser la mise en page et ajouter une requête multimédia CSS uniquement pour traiter les pièces brisées,
  • répétez le processus jusqu'à atteindre le prochain point d'arrêt.

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

Utiliser des points d'arrêt naturels

Les "points d'arrêt" deviennent alors le point auquel votre conception mobile commence à "se rompre" , c'est-à-dire cesser d'être utilisable ou d'être agréable à l'œil. Une fois que votre site mobile fonctionne correctement, sans requêtes multimédia, vous pouvez cesser de vous préoccuper de tailles spécifiques et simplement ajouter des requêtes multimédias prenant en charge des fenêtres d'affichage de plus en plus grandes.

Si vous n'essayez pas d'épingler une conception avec une taille d'écran exacte, cette approche fonctionne en en supprimant 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 sa résistance, quelle que soit sa taille. En d’autres termes, si un menu/une section de contenu/quelque chose cesse d’être utilisable à une certaine taille, définissez un point de rupture pour cette taille , non pour une taille de périphérique spécifique.

Voir le post de Lyza Gardner sur points de rupture comportementaux , ainsi que le post de Zeldman sur Ethan Marcotte et comment le web design a évolué de l'idée initiale.

138
Dave Everitt

  1. J'ai utilisé ce site pour trouver la résolution et développé CSS par nombres réels. Mes chiffres diffèrent un peu des réponses ci-dessus, sauf que le CSS s'applique aux périphériques souhaités. 

  2. Aussi, ayez ce morceau de 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 à chaque requête multimédia et vous verrez quelle requête a été appliquée. 

46
user2060451

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) {

    }
22
Santosh Khalse

Requêtes de support pour les points d'arrêt de périphérique courants

/* 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 */
}
20
Purvik Dhorajiya
  1. Extra petits appareils (téléphones, jusqu'à 480px) 
  2. Petits appareils (tablettes, 768px et plus) 
  3. Appareils de taille moyenne (tablettes paysagères, ordinateurs portables et ordinateurs de bureau , 992 pixels et plus) 
  4. Gros appareils (grands ordinateurs de bureau, 1200px et plus) 
  5. liseuses de portrait (Nook/Kindle), tablettes plus petites - largeur minimale: 481px 
  6. tablettes portrait, iPad portrait, liseuses paysage - largeur minimale: 641px 
  7. tablette, iPad paysage, ordinateurs portables de basse résolution - largeur minimale: 961px
  8. Largeur de l'appareil HTC One: 360px hauteur de l'appareil: 640px -webkit-device-pixel-ratio: 3
  9. Largeur du périphérique Samsung Galaxy S2: 320px hauteur du périphérique: 534px-ratio-pixel-périphérique-web: 1.5 (rapport de pixel périphérique-moz: 1.5), (rapport de pixel périphérique-moz: 3/2), (rapport min-périphérique-pixel: 1,5 
  10. Largeur de l'appareil Samsung Galaxy S3: 320px Hauteur de l'appareil: 640px-Ratio pixel-appareil-web: 2 (min - Ratio pixel de l'appareil moz: 2), 
  11. Largeur du périphérique Samsung Galaxy S4: 320px hauteur du périphérique: 640px -webkit-device-pixel-ratio: 3 
  12. Largeur du périphérique LG Nexus 4: 384px hauteur du périphérique: 592px -webkit-device-pixel-ratio: 2 
  13. Asus Nexus 7 device-width: 601px hauteur de l'appareil: 906px - webkit-min-device-ratio: 1.331) et (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 et 2, iPad Mini-Largeur du périphérique: 768px Hauteur du périphérique: 1024px -webkit-device-pixel-ratio: 1 
  15. iPad 3 et 4 device-width: 768px hauteur de l'appareil: 1024px -webkit-device-pixel-ratio: 2) 
  16. largeur du périphérique iPhone 3G: 320px Hauteur du périphérique: 480px -webkit-device-ratio: 1) 
  17. largeur de l'appareil iPhone 4: 320px Hauteur de l'appareil: 480px -webkit-device-pixel-ratio: 2) 
  18. largeur de l'appareil iPhone 5: 320px Hauteur de l'appareil: 568px -webkit-device-pixel-ratio: 2)
18
Web Designer cum Promoter

Ce n’est pas une question de comptage de pixels, c’est une question de taille réelle (en mm ou en pouces) de caractères à l’écran, qui dépend de la densité en pixels . Par conséquent, "min-width:" et "max-width:" sont inutile . Une explication complète de ce problème est disponible ici: Quel est exactement le rapport de pixels du périphérique?

Les requêtes "@media" prennent en compte le nombre de pixels et le ratio de pixels du périphérique, ce qui donne 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 10 pixels et que les " résolution horizontale virtuelle "est de 300 px, 30 caractères seront nécessaires pour remplir une ligne.

5
jumpjack

Comme il existe de nombreuses tailles d’écrans qui changent toujours et changeront probablement, la meilleure façon de procéder consiste à baser votre points de rupture et média _ {requêtes sur votre conception.

Le moyen le plus simple de procéder consiste à saisir la conception de votre bureau terminée et à l’ouvrir dans votre navigateur Web. Réduire l'écran lentement pour le réduire. Observez pour voir quand la conception commence à, "break", ou semble horrible et à l'étroit. À ce stade, un point d'arrêt avec une requête multimédia serait requis.

Il est courant de créer trois ensembles de requêtes multimédia pour le bureau, la tablette et le téléphone. Mais si votre conception est satisfaisante pour les trois, pourquoi s’embêter avec la complexité de l’ajout de trois requêtes multimédia différentes qui ne sont pas nécessaires. Faites-le au besoin!

4
Robert Rocha

De nos jours, la chose la plus courante est de voir les appareils avec écran Retina, autrement dit: les appareils avec des résolutions élevées et une densité de pixels très élevée (mais généralement de taille inférieure à 6 pouces). C'est pourquoi vous aurez besoin que Retina affiche des requêtes multimédia spécialisées sur votre 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

2
Ezequiel Adrian

Le comportement ne change pas sur le bureau. Mais sur les tablettes et les téléphones portables, j'agrandis la barre de navigation pour couvrir la grande image du logo. Note: Utilisez le marge (haut et bas)} autant que nécessaire pour la hauteur de votre logo. 

Pour mon cas, 60px haut et bas a parfaitement fonctionné! 

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

Vérifiez la barre de navigation ici .

2
Pratik Khadloya
  • Extra petits appareils ~ Téléphones (<768px) 
  • Petits appareils ~ Tablettes (> = 768px) 
  • Appareils de taille moyenne ~ Ordinateurs de bureau (> = 992px) 
  • Gros appareils ~ Ordinateurs de bureau (> = 1200px)
0
bekzat

Une fonctionnalité supplémentaire est que vous pouvez également utiliser des requêtes-media dans l'attribut media de la balise <link>.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Avec cela, le navigateur téléchargera toutes les ressources CSS, quel que soit l'attribut media .La différence est que si la requête de média de l'attribut media est évaluée à false, alors Ce fichier .css et son contenu ne seront pas bloqués par le rendu.

Par conséquent, il est recommandé d'utiliser l'attribut média dans la balise <link>, car il garantit une meilleure expérience utilisateur.

Vous pouvez lire ici un article de Google sur ce problème https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Quelques outils qui vous aideront à automatiser la séparation de votre code CSS dans différents fichiers en fonction de vos requêtes multimédia

Webpack https://www.npmjs.com/package/media-query-pluginhttps://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

0
Juanma Menendez