Media-query charge une feuille de style alors qu'il ne devrait pas le faire

Question

J'ai mis en place une feuille de style de base ainsi qu'une feuille de style media-query, en suivant une philosophie d'amélioration progressive, comme ci-dessous :

<!-- Empty CSS file; base style for really old mobile browsers (128px,240px,<320px) -->
<link rel="stylesheet" href="css/global.css" media="all">
<!-- Layout for newer narrow viewport browsers, as well as desktop browsers -->
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 20em)">

Cependant, lorsque j'ouvre Firefox et que je redimensionne l'image pour qu'elle soit inférieure à 320 pixels, elle se charge toujours. layout.css au lieu de me montrer une page non stylisée. Comment cela se fait-il ?

En outre (au lieu de poser une question distincte), si j'ajoute des styles de base à global.css et ajoutez une seule requête média à layout.css cette dernière disposition est rendue et reste sur la page même si je redimensionne le navigateur pour qu'il ait une largeur inférieure à la largeur minimale de layout.css pour postuler.

Answer 1

Le problème est que la largeur minimale de la fenêtre de visualisation de Firefox se trouve être plus large que 320px ce qui signifie que quelle que soit la taille de la fenêtre, elle ne sera jamais inférieure à 320px . Votre layout.css seront toujours appliqués dans Firefox parce que la fenêtre de visualisation respecte toujours la norme min-width exigence de 320px (et probablement 20em ). Essayez votre configuration actuelle dans Chrome (Chrome a généralement une largeur de vue minimale plus étroite), et essayez quelque chose comme min-width: 600px dans Firefox, et vos styles devraient être appliqués comme prévu ( layout.css sera appliquée lorsque la fenêtre de visualisation est au moins égale à 600px large).

Editer

Il s'agit d'un bon site de démonstration pour les requêtes médiatiques : Terrain de jeu de Media Query . Il vous permettra de voir quelle est la largeur minimale de votre fenêtre pour différents navigateurs. Il suffit de redimensionner jusqu'à ce que la valeur de la largeur cesse de changer. Si vous modifiez votre barre d'outils (en ajoutant/supprimant des éléments) dans Firefox, vous pouvez modifier la largeur minimale de la fenêtre.