Requêtes médias pour sélectionner différentes 960 gs

Question

Je suis en utilisant le code suivant ci-dessous pour sélectionner les fichiers CSS différents en fonction de la taille de la fenêtre de mon navigateur. Cependant, le premier ne semble pas fonctionner quand je redimensionnez la fenêtre à cette taille, même si j'actualisez la page. Je ne sais pas ce que je devrais faire pour résoudre ce problème. Merci.

@import url("css/960.css") screen and (max-device-width: 1200px);
@import url("css/2520.css") screen and (max-device-width: 2560px);

Answer 1

Faire une supposition ici, mais je ne pense pas que cela fonctionnera parce que vous utilisez max-device-width et non max-width.

device-width sont les pixels virtuels d'un dispositif est capable d'afficher.

Dispositif de largeur (Mozilla) - Décrit la largeur du dispositif de sortie (ce qui signifie l'écran ou la page entière,
plutôt que la zone de rendu, comme la fenêtre de document).

Je ne pense pas que vous pouvez faux que l'évolution de la taille d'une fenêtre de navigateur.

max-width d'autre part est une mesure de la fenêtre réelle affichée dans le navigateur.

Largeur (Mozilla) - La fonction de support de largeur décrit la largeur de la surface de rendu du dispositif de sortie (tel que la largeur de la fenêtre de document ou la largeur de la zone de page sur une imprimante).

Alors vos options sont soit essayer en utilisant max-width:

@import url("css/960.css") screen and (max-width: 1200px);
@import url("css/2520.css") screen and (max-width: 2560px);

ou essayez d'utiliser une sorte de simulateur de dispositif comme un iPad simulateur ou un périphérique réel pour vérifier que vos requêtes médias fonctionnent correctement.