Media Queries: comment cibler les ordinateurs de bureau, les tablettes et les mobiles?

J'ai fait des recherches sur les requêtes multimédias et je ne comprends toujours pas comment cibler des 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 devraient être les points d'arrêt pour chaque appareil?

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

Dans la pratique, de nombreux concepteurs convertissent les pixels en ems, les b / c ems offrant généralement un meilleur zoom. Au zoom standard 1em === 16px. Multipliez les pixels par 1em/16pxpour obtenir des ems. Par exemple,320px === 20em ,.

En réponse au commentaire, min-widthest standard dans la conception "mobile-first", dans laquelle vous commencez par concevoir pour vos plus petits écrans, puis ajoutez des requêtes multimédias sans cesse croissantes, vous faisant avancer 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 ultérieures remplaceront les règles précédentes.

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

La sagesse générale n'est pas de cibler des appareils 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 fenêtre plus grande et notez où il commence à échouer,
• repenser la mise en page et ajouter une requête multimédia CSS juste pour gérer les pièces 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 «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 visuellement agréable. Une fois que vous avez un bon site mobile fonctionnel, sans requêtes multimédias, vous pouvez cesser de vous préoccuper des tailles spécifiques et simplement ajouter des requêtes multimédias qui gèrent des fenêtres successivement plus grandes.

Si vous n'essayez pas d'épingler un dessin à une taille d'écran exacte, cette approche fonctionne en supprimant la nécessité de cibler des appareils spécifiques . L' intégrité de la conception elle-même à chaque point d'arrêt garantit qu'elle tiendra à n'importe quelle taille. En d'autres termes, si un menu / une section de contenu / tout ce qui cesse d'être utilisable à une certaine taille, créez un point d'arrêt pour cette taille , pas pour une taille de périphérique spécifique.

Voir le post de Lyza Gardner sur les points d'arrêt comportementaux , ainsi que le post de Zeldman sur Ethan Marcotte et comment la conception de sites Web réactifs a évolué à partir de l'idée initiale.

Utiliser le balisage sémantique

De plus, le plus simple et plus sémantique de la structure DOM avec nav, header, main, section, footeretc. ( en évitant abominations comme div class="header"avec internes imbriqués divbalises) plus il sera de réactivité ingénieur, évitant notamment des flotteurs en utilisant CSS Grid Layout (Sarah Drasner générateur de grille est un excellent outil pour cela) et flexbox pour organiser et réorganiser selon votre plan de conception RWD.

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

Pour iphone

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

Pour tablettes

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

Voici quelques bons articles:

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

1. J'ai utilisé ce site pour trouver la résolution et développé CSS par nombre réel. Mes chiffres varient un peu par rapport aux réponses ci-dessus, sauf que mon CSS frappe réellement les appareils souhaités.

2. Aussi, ayez ce morceau de 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) { 
     /* 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 unique 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 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 */
}

1. Petits appareils supplémentaires (téléphones, jusqu'à 480 pixels)
2. Petits appareils (tablettes, 768 pixels et plus)
3. Appareils moyens (grandes tablettes paysage, ordinateurs portables et ordinateurs de bureau, 992 pixels et plus)
4. Grands appareils (grands ordinateurs de bureau, 1 200 pixels et plus)
5. liseuses numériques (Nook / Kindle), tablettes plus petites - largeur minimale: 481 px
6. tablettes portrait, iPad portrait, liseuses paysage - min-width: 641px
7. tablette, paysage iPad, ordinateurs portables lo-res - largeur min: 961px
8. HTC One largeur de l'appareil: 360px hauteur de l'appareil: 640px -webkit-device-pixel-ratio: 3
9. Samsung Galaxy S2 largeur de l'appareil: 320px hauteur de l'appareil: 534px -webkit-device-pixel-ratio: 1.5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (rapport min-pixels par appareil: 1,5
10. Samsung Galaxy S3 largeur d'appareil: 320px hauteur d'appareil: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Navigateurs Firefox plus anciens (avant Firefox 16) -
11. Samsung Galaxy S4 largeur d'appareil: 320px hauteur d'appareil: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 largeur d'appareil: 384px hauteur d'appareil: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 largeur d'appareil: 601px hauteur d'appareil: 906px -webkit-min-device-pixel-ratio: 1.331) et (-webkit-max-device-pixel-ratio-pixel: 1.332)
14. iPad 1 et 2, iPad Mini largeur d'appareil: 768 px hauteur d'appareil: 1024 px -webkit-device-pixel-ratio: 1
15. iPad 3 et 4 largeur d'appareil: 768px hauteur d'appareil: 1024px -webkit-device-pixel-ratio: 2)
16. iPhone 3G-largeur d'appareil: 320px hauteur d'appareil: 480px -webkit-device-pixel-ratio: 1)
17. iPhone 4 largeur d'appareil: 320px hauteur d'appareil: 480px -webkit-device-pixel-ratio: 2)
18. iPhone-largeur d'appareil: 320px hauteur d'appareil: 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 pouces) de caractères à 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 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 ratio de pixels de l'appareil, ce qui se traduit par une "résolution virtuelle" qui est ce que vous devez réellement prendre en compte lors de la conception de votre page: si votre police est de largeur fixe 10px et la " résolution horizontale virtuelle "est de 300 px, 30 caractères seront nécessaires pour remplir une ligne.

De nos jours, la chose la plus courante est de voir des appareils à écran rétinien, en d'autres termes: des appareils avec des résolutions élevées et une densité de pixels très élevée (mais généralement inférieure à 6 pouces de taille physique). C'est pourquoi vous aurez besoin de retina afficher des requêtes multimédias spécialisées sur votre CSS. Voici 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

Étant donné qu'il existe de nombreuses tailles d'écran variables 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 requêtes multimédias sur votre conception.

La façon la plus simple de procéder consiste à saisir la conception de votre bureau et à l'ouvrir dans votre navigateur Web. Rétrécissez lentement l'écran pour le rétrécir. Observez pour voir quand le design commence à "casser" ou a l'air horrible et exigu. À 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édias pour ordinateur, tablette et téléphone. Mais si votre conception semble bonne sur les trois, pourquoi s'embêter avec la complexité de l'ajout de trois requêtes multimédias différentes qui ne sont pas nécessaires. Faites-le au besoin!

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

<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écharge toutes les ressources CSS, quel que soit l' attribut média . La différence est que si la requête multimédia de l'attribut multimédia est évaluée à false, ce fichier .css et son contenu ne seront pas bloqués au rendu.

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

Ici, vous pouvez lire un article 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édias

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

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

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

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

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

Vérifiez la barre de navigation ici .

• Très petits appareils ~ Téléphones (<768 px)
• Petits appareils ~ Tablettes (> = 768px)
• Appareils moyens ~ Ordinateurs de bureau (> = 992px)
• Grands appareils ~ Ordinateurs de bureau (> = 1200 px)

J'utilise le suivant pour faire mon travail.

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

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}

@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

    }