Les requêtes CSS sur les médias sont min-width et min-device-width en conflit?
Je suis très nouveau dans le monde des requêtes multimédias, et il est clair qu'il manque quelque chose de fondamental dans la différence entre la largeur et la largeur de l'appareil - autre que leurs capacités de ciblage évidentes.
Je voudrais cibler à la fois des ordinateurs et des appareils normaux avec les mêmes points d'arrêt, donc je viens de dupliquer toutes mes requêtes de largeur minimale et maximale en requêtes de largeur minimale et maximale de périphérique. Pour une raison quelconque, lorsque j'ajoute les homologues -device, mon CSS est interprété très différemment par les ordinateurs ordinaires, et je ne suis pas sûr de ce que je fais mal.
Vous pouvez voir les effets ici (voici à quoi cela DEVRAIT ressembler)
Et ici (après avoir ajouté -device-width à mes requêtes, mon CSS est foutu à la plus petite largeur - les plus grandes résolutions sont visibles même lorsque la largeur du navigateur est plus petite que ce qui est appelé).
Voici mes liens CSS - y a-t-il un problème 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">
La largeur de l'appareil fait référence à la résolution de l'affichage (par exemple, le 1024 de 1024x768), 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é). Si votre résolution est suffisamment grande pour vous mettre dans un point d'arrêt, mais que la largeur du navigateur est suffisamment petite pour vous mettre dans un autre, vous vous retrouverez avec une étrange combinaison des deux.
Sauf si vous avez une raison légitime de restreindre les feuilles de style en fonction de la résolution et non de la taille de la fenêtre, utilisez simplement min-width/max-width et évitez min-device-width/max-device-width.