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

472

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?

css mobile media-queries tablet betamax
la source

Consultez ces articles utiles: * Comment créer un site Web mobile - Smashing Magazine * Comment utiliser les requêtes multimédia CSS3 pour créer une version mobile de votre site Web - Smashing Magazine

Ahsan Rathod

Requêtes multimédias pour les appareils standard css-tricks.com/snippets/css/media-queries-for-standard-devices

Dmytro Dzyubak

644

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.

ryanve
la source

1

Je me demandais s'il fallait incrémenter la limite inférieure des requêtes multimédias. Cela semble logique, mais je ne l'ai pas vu trop souvent mentionné. Je voudrais même aller plus loin et me convertir en ems. Regardez les captures d'écran @jonikorpi du comportement du site d'Ethan Marcotte avec le zoom et les requêtes multimédia px. github.com/scottjehl/Respond/issues/18

Larry

21

Pourquoi utiliseriez-vous la largeur minimale plutôt que la largeur maximale? Comment feriez-vous pour éviter que le min-width: 320pxCSS ne remplace le min-width: 801px?

user2019515

2

Ce code ne fonctionne pas sur mes appareils mobiles! Quelqu'un peut-il fournir un exemple de travail!

Jacob

3

Quelqu'un a-t-il l'équivalent de "max-width"?

Pylinux

6

2018 - 2k et 4k sont en augmentation

Alexander

160

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.

Dave Everitt
la source

10

Le client voudra que son site ressemble à cela sur son iPad. Mon meilleur point d'arrêt ferait passer le site à une mise en page mobile sur l'iPad. Le client n'accepterait pas cela, il souhaite que la version fantaisie apparaisse sur l'iPad et les autres tablettes. La sagesse générale ne paie pas mon salaire :) J'avais besoin de faire des tours avec la balise META de la fenêtre d'affichage. C'était très douloureux mais je l'ai réussi avec un peu d'aide de JavaScript (comme toujours). PS: j'ai utilisé des unités en cm, pas des pixels.

Rolf

Avec les points d'arrêt naturels, vous pouvez avoir un point d'arrêt de taille moyenne qui inclut l'iPad (et d'autres tablettes) en mode paysage, ou ajouter un autre point d'arrêt pour le mode portrait. J'ai parfois utilisé quatre points d'arrêt, toujours en commençant CSS et tout le balisage avec mobile-first (il est plus difficile de réduire et de se concentrer sur le mobile signifie que votre conception et votre contenu sont réduits à l'essentiel, que vous pouvez étendre à mesure que les tailles augmentent) , un juste au-dessus de 400 pixels de large (ou «au-dessus de la taille mobile»), puis deux tailles de bureau, une extra-large. Vous pouvez ensuite personnaliser le point d'arrêt «ci-dessus mobile» pour qu'il fonctionne correctement sur l'iPad.

Dave Everitt

2

Ce n'est pas suffisant pour tous les cas. Prenons par exemple les cases à cocher. Ils peuvent convenir à tous les navigateurs Web d'un PC, mais sur une tablette, ils doivent être trop petits pour que l'utilisateur puisse les toucher. Parfois, vous devez cibler des appareils, que ce soit une idée générale ou non. Ceci est un bon article: html5rocks.com/en/mobile/cross-device

monalisa717

2

Je suis avec Dave sur celui-ci - il y a tellement d'appareils que vous ne pouvez pas concevoir pour tous. L'utilisation de points d'arrêt naturels garantit que votre site fonctionne quelle que soit la taille d'écran disponible. En ce qui concerne les clients qui souhaitent que leur site ressemble à une certaine manière, vous devez les éduquer. Concernant les cases à cocher étant trop petites - où sont vos étiquettes?

diggersworld

@ user1411056 - bon article. Je suppose que cela dépend de ce que vous visez et du fonctionnement de votre site / application Web. Je dirais que la conception réactive de base devrait sous-tendre tout avant que des améliorations ne soient mises en place. diggersworld Je suis tout pour éduquer les clients - pourquoi vous payent-ils autrement? Et oui, les cases à cocher peuvent être réactives; appuyer sur une étiquette est équivalent et les étiquettes peuvent être stylisées. Ensuite, il y a l'inutilité du survol sur les appareils tactiles; qui peut avoir de grands écrans et le délai de prise de 300 ms . Une fondation RD de base, améliorée par JS.

Dave Everitt

154

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:

sandeep
la source

32

Ma tablette a une largeur de 2560x1600

LeeGee

36

C'est peut-être le cas, mais les navigateurs sur les appareils mobiles ont un «ratio de pixels de l'appareil». C'est là qu'il traite chaque "pixel" logique comme 2, 3 ou même plus de pixels réels sur votre appareil. Sinon, une hauteur de 20 pixels serait très petite et impossible à appuyer - en particulier sur votre écran!

greg84

6

@media only screen and (min-device-width: 480px) {} Je l'ai essayé - correspond également aux ordinateurs de bureau. Mais que se passe-t-il si nous voulons uniquement un appareil mobile?

Darius.V

@ Darius.V, cela suit la mentalité "Mobile First", ce qui signifie que vous démarrez mobile, puis apportez des modifications à mesure que l'écran s'agrandit, vous devez donc également inclure: @media only screen and (min-device-width: 1024){}ou quelque chose comme ça pour remplacer ces changements. Alternativement, vous pouvez le faire @media only screen and (MAX-device-width: 1024){}si vous avez commencé avec une conception de bureau et que vous souhaitez apporter des modifications uniquement aux choses inférieures à 1024.

Steely

Cela signifie que le bureau ne fonctionnera pas avec RWD en raison de la largeur minimale de l'appareil. Recommande de faire une largeur minimale et rien sur l'appareil. La véritable réactivité ne devrait pas nécessiter de rafraîchissement ou de périphérique limité

TheBlackBenzKid

50

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.

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.

user2060451
la source

27

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

    }

Santosh Khalse
la source

25

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

Purvik Dhorajiya
la source

19

Petits appareils supplémentaires (téléphones, jusqu'à 480 pixels)
Petits appareils (tablettes, 768 pixels et plus)
Appareils moyens (grandes tablettes paysage, ordinateurs portables et ordinateurs de bureau, 992 pixels et plus)
Grands appareils (grands ordinateurs de bureau, 1 200 pixels et plus)
liseuses numériques (Nook / Kindle), tablettes plus petites - largeur minimale: 481 px
tablettes portrait, iPad portrait, liseuses paysage - min-width: 641px
tablette, paysage iPad, ordinateurs portables lo-res - largeur min: 961px
HTC One largeur de l'appareil: 360px hauteur de l'appareil: 640px -webkit-device-pixel-ratio: 3
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
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) -
Samsung Galaxy S4 largeur d'appareil: 320px hauteur d'appareil: 640px -webkit-device-pixel-ratio: 3
LG Nexus 4 largeur d'appareil: 384px hauteur d'appareil: 592px -webkit-device-pixel-ratio: 2
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)
iPad 1 et 2, iPad Mini largeur d'appareil: 768 px hauteur d'appareil: 1024 px -webkit-device-pixel-ratio: 1
iPad 3 et 4 largeur d'appareil: 768px hauteur d'appareil: 1024px -webkit-device-pixel-ratio: 2)
iPhone 3G-largeur d'appareil: 320px hauteur d'appareil: 480px -webkit-device-pixel-ratio: 1)
iPhone 4 largeur d'appareil: 320px hauteur d'appareil: 480px -webkit-device-pixel-ratio: 2)
iPhone-largeur d'appareil: 320px hauteur d'appareil: 568px -webkit-device-pixel-ratio: 2)

Concepteur Web Cum Promoter
la source

1

Écran Sansung Galaxy S3 @media uniquement et (largeur de l'appareil: 720px) et (hauteur de l'appareil: 1280px) et (-webkit-min-device-pixel-ratio: 2) TESTÉ et a fonctionné.

user2060451

5

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.

jumpjack
la source

7

Génial. Alors, quelles devraient être les requêtes des médias?

PKHunter

4

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

Ezequiel Adrian
la source

4

É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!

Robert Rocha
la source

3

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

Juanma Menendez
la source

2

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 .

Pratik Khadloya
la source

2

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)

Bekzat
la source

2

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

Mayank Dudakiya
la source

-1

@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

    }

Shailesh
la source