Requêtes médias: Comment cibler de bureau, tablettes et mobiles?

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

je veux pouvoir cibler bureau, tablette et mobile. Je sais qu'il y a certaines différences, mais il serait agréable d'avoir un système générique qui peut être utilisé pour cibler ces dispositifs.

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)

Que pensez-vous que ces "points d'arrêt" devraient être pour chaque dispositif?

360
demandé sur Quantastical 2011-06-16 14:57:10

13 réponses

de l'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 : affiné 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 ems, en grande partie B/C ems se permettre zooming. Au zoom standard 1em === 16px . Multiplier les pixels par 1em/16px pour obtenir ems. Par exemple, 320px === 20em .

en réponse au commentaire, min-width est la norme EN "mobile-first" design, dans lequel vous commencez par concevoir pour vos plus petits écrans, puis Ajouter toujours plus de requêtes médias, en vous travaillant sur des écrans de plus en plus grands. Peu importe si vous préférez min- , max- , ou des combinaisons de ceux-ci, soyez conscient 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 plus tardives l'emporteront sur les règles plus anciennes.

502
répondu ryanve 2017-06-28 05:22:08

si vous voulez cibler un périphérique, écrivez min-device-width . Par exemple:

pour iPhone 

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

pour comprimés 

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

voici quelques bons articles:

141
répondu sandeep 2014-03-17 05:13:33

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

la sagesse générale est non pas pour cibler des dispositifs ou des tailles spécifiques , mais pour recadrer le terme "point de rupture":

  • développer le site pour mobile first en utilisant des pourcentages ou ems, pas des pixels,
  • puis l'essayer dans un plus grand viewport et noter où il commence à échouer,
  • redessinez la mise en page et ajoutez une requête multimédia CSS juste pour gérer les parties cassées,
  • répétez le processus jusqu'au prochain point de rupture.

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

Use point de rupture naturel

les "points de rupture" deviennent alors les point réel où votre mobile commence à "casser " c.-à-d. cesser d'être utilisable ou visuellement agréable. Une fois que vous avez un bon site mobile fonctionnel, sans requêtes médias, vous pouvez arrêter d'être préoccupé par des tailles spécifiques et tout simplement ajouter des requêtes médias qui traitent successivement des vues plus grandes.

si vous n'essayez pas d'épingler un design à une taille d'écran exacte, cette approche fonctionne par supprimer la nécessité de cibler des dispositifs spécifiques . Le l'intégrité de la conception elle-même, à chaque point d'arrêt assure qu'il tiendra jusqu'à n'importe quelle taille. En d'autres termes, si un menu/section de contenu/quoi que ce soit cesse d'être utilisable à une certaine taille, concevoir un point de rupture pour cette taille , pas pour une taille d'appareil spécifique.

Voir Lyza Gardner post sur comportement des points d'arrêt , et aussi Zeldman post à propos de Ethan Marcotte et comment responsive web design évolué de la intitial idée.

126
répondu Dave Everitt 2015-11-30 11:38:28

  1. j'ai utilisé ce site pour trouver la résolution et développé CSS par nombres réels. Mes nombres varient un peu des réponses ci-dessus, sauf que le my css touche en fait les appareils désirés.

  2. aussi, avoir ce morceau de code de débogage juste après votre requête de médias: 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;
  }
}

    J'ai trouvé ça sur le web, Je ne me souviens pas exactement du site. Ajouter cet élément de débogage dans chaque requête média et vous verrez quelle requête est appliquée.

46
répondu user2060451 2016-12-18 18:09:38

Le meilleur des points d'arrêt recommandé 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) {

    }
21
répondu Santosh Khalse 2017-01-04 08:01:23

requêtes des Médias pour les points de rupture des dispositifs communs 

/* 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 */
}
19
répondu purvik7373 2016-06-02 17:48:37
  1. le plus petit des appareils (téléphones, jusqu'à 480px)
  2. les Petits appareils (tablettes, 768px)
  3. dispositifs moyens (grands tablettes de paysage, Ordinateurs portables, et ordinateurs de bureau, 992px et plus)
  4. Grands appareils (grands bureaux, 1200px)
  5. portrait e-lecteurs (Nook/Kindle), les petites tablettes - min-largeur:481px
  6. portrait tablettes, portrait iPad, paysage e-readers - min-width: 641px
  7. de la tablette, le paysage de l'iPad, lo-res ordinateurs portables - min-largeur: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 appareil-hauteur: 640px -webkit-device-pixel-ratio: 2 (min-moz-device-pixel-ratio: 2), Plus Firefox (avant Firefox 16) -
  11. Samsung Galaxy S4 device-width: 320px device - height: 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 device-width: 768px device-height: 1024px-webkit-device-pixel-ratio: 1
  15. iPad 3 et iPad 4 device-width: 768px appareil-hauteur: 1024px -webkit-device-pixel-ratio: 2)
  16. iPhone 3G périphérique-largeur: 320px périphérique-hauteur: 480px-webkit-périphérique-pixel-ratio: 1)
  17. iPhone 4 périphérique-largeur: 320px périphérique-hauteur: 480px - webkit-device-pixel-ratio: 2)
  18. iPhone 5 périphérique-largeur: 320px périphérique-hauteur: 568px-webkit-périphérique-pixel-ratio: 2)
17
répondu Web Designer cum Promoter 2013-11-05 05:41:14

ce n'est pas une question de nombre de pixels, c'est une question de taille réelle (en mm ou pouces) de caractères sur l'écran, qui dépend de la densité des pixels. Par conséquent," min-width: "et" max-width: "sont inutiles. Une explication complète de cette question est ici: qu'est-ce que le rapport des pixels de l'appareil?

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

5
répondu jumpjack 2017-05-23 12:18:27

Puisqu'il y a beaucoup de tailles d'écran variables qui changent toujours et changeront probablement toujours la meilleure façon d'aller est de baser vos points d'arrêt et médiaqueries sur votre conception.

la façon la plus facile de faire cela est de saisir votre conception de bureau terminée et l'ouvrir dans votre navigateur web. Rétrécir l'écran lentement pour le rendre plus étroit. Observez pour voir quand le dessin commence à, "casser", ou regarder horrible et à l'étroit. À ce point un point de rupture avec une requête des médias serait nécessaire.

il est courant de créer trois séries de requêtes mé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 différentes requêtes médias qui ne sont pas nécessaires. Le faire sur une base comme-nécessaire.

4
répondu Robert Rocha 2016-09-01 01:58:08

a travaillé pour moi. Le comportement ne change pas sur le bureau. Mais sur tablettes et mobile, j'agrandis la barre de navigation pour couvrir l'image du grand logo. Remarque, Utilisez la marge (haut et bas) autant que vous avez besoin pour la hauteur de votre logo. Pour mon cas, 60px en haut et en bas fonctionnait parfaitement. Vérifiez la barre de navigation ici . 

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}
2
répondu Pratik Khadloya 2016-10-23 05:40:33

de nos jours, la chose la plus courante est de voir les dispositifs d'écran rétinien, en d'autres termes: les dispositifs avec des résolutions élevées et une densité de pixel très élevée (mais habituellement plus petite que 6 pouces de taille physique). C'est pourquoi vous aurez besoin de Retina Afficher des médias spécialisés-requêtes 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: CSS-Tricks Website

2
répondu Ezequiel Adrian 2018-04-02 05:24:09 
Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)
0
répondu bekzat 2017-12-11 19:06:53 
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
0
répondu Shailesh 2018-09-14 12:03:52