Les requêtes de média CSS min-width et min-device-width contradictoires?

Je suis très nouveau dans le monde des media queries, et il est clair qu'il y est quelque chose de fondamental qui me manque, à propos de la différence entre la largeur et device-width -- autres que de leur évidente ciblage des capacités.

Je voudrais cible régulière des ordinateurs et des appareils avec les mêmes points d'arrêt, j'ai donc simplement dupliqué tous mes min & largeur max de requêtes min-device et max-device largeur des requêtes. Pour quelque raison que ce soit, lorsque j'ajoute le dispositif homologues, mon CSS est interprétée très différemment régulièrement par des ordinateurs, et je ne suis pas sûr de ce que je fais mal.

Vous pouvez voir les effets (c'est ce à quoi il DEVRAIT ressembler)

Et ici (après l'ajout d'-device-width à mes questions, mon CSS se fait défoncer jusqu'à la plus petite largeur -- les résolutions les plus élevées sont visibles même lorsque la largeur du navigateur est plus petite que ce qui est appelé).

Voici mes liens de CSS -- est-il quelque chose de mal avec ma syntaxe? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
  • Dans FF les deux versions ressemble exactement la même chose pour moi. Dans le navigateur et la version que vous avez des problèmes?
  • FF 12. Assurez-vous que vous faites glisser lentement à partir de la plus grande à la plus petite de sorte qu'il peut voir les autres requêtes. Je vois ce problème dans chaque navigateur, j'ai essayé -- FF, Chrome, etc -- je ne sais pas si vous essayez à la plus petite des largeurs.
  • Voici des captures d'écran large de FF 12 et Chrome 25 swanflighthaven.com/pagestuff/correct.jpg et swanflighthaven.com/pagestuff/incorrect.jpg
InformationsquelleAutor seaofinformation | 2013-03-07
  1. 77

    Device-width se réfère à l'affichage de la résolution (par exemple. la 1024 de 1 024 x 768), tandis que la largeur fait référence à la largeur du navigateur lui-même (qui sera différente de la résolution si le navigateur n'est pas maximisée). Si votre résolution est assez grand pour vous rendre dans un point de rupture, mais la largeur du navigateur est assez petit pour vous dans l'autre, vous vous retrouverez avec une étrange combinaison des deux.

    Sauf si vous avez une raison légitime pour restreindre les feuilles de style en fonction de la résolution et non pas la taille de la fenêtre d'affichage, puis il suffit d'utiliser min-width/max-width et éviter min-device-width/max-device-width.

    • Ahhh. Bien que tout à fait logique. Merci beaucoup pour expliquer que, de façon concise! Je me sens idiote, je ne comprenais pas ce à partir de la lecture que j'ai fait. Mais question: comment dois-je cibler les appareils mobiles ET les ordinateurs?
    • Sont tous des dispositifs ciblés (Iphones, Ipads, etc) si je saute de l'appareil-largeur?
    • Parce que les appareils mobiles ont généralement leurs navigateurs agrandie, device-width et la largeur sera la même.
    • Vous êtes une bouée de sauvetage, je vous remercie.
    • excellent billet, merci
    • Mais, en règle générale, si vous voulez que votre conception de site web pour s'adapter à l'navigateur largeur je suppose que c'est mieux d'aller pour min/max largeur au lieu de device-width n'est-ce pas? Je veux dire, si mon envie aux utilisateurs de parcourir mon site avec un réduit navigateur c'est leur propre choix, n'est-ce pas ? Il allait se sentir comme un échec pour moi, si la conception de l'aller de noix quand je joue avec mon navigateur est de taille. Je suppose que c'est jusqu'à ce que vous voulez faire.
    • Excellent post et concise réponse.
    • Selon cet article sitepoint.com/media-queries-width-vs-device-width, la réponse devrait être un peu plus complexe.
    • Avec dispositif de largeur seulement l'une des images seront téléchargées, avec la largeur de la fenêtre de redimensionnement de la fenêtre pourrait s'étendre à un point d'arrêt puis de multiples images seront téléchargées!

    InformationsquelleAutor cimmanon