J'aimerais utiliser une instruction conditionnelle pour joindre une feuille de style différente pour:
Je suis sûr que cela est possible, mais je n'ai jamais vu le code avant?
ps. Je ne cherche pas une solution JavaScript si la résolution des clients est <= 1024 * 768
3 Réponses :
CSS 3 présente requêtes multimédia , mais c'est nouveau et le support n'est pas tout Ce généralisé encore (Firefox ne l'a introduit que dans la version 3.5, par exemple, et Internet Explorer ne l'obtiendra pas avant que la version 9) soit construite avec une amélioration progressive à l'esprit. CSS astuces a un didacticiel pour fournir Différents CSS pour différentes tailles de fenêtre de navigateur (qui est une métrique plus utile puis résolution d'affichage).
Vous pouvez tester Prise en charge de votre navigateur .
Ouais, il est dommage qu'il y ait une forte corrélation entre 1024 * 768 et ses vieux navigateurs (pas de CSS3)! - avec des netbooks à la hausse RES-CSS, la corellation peut changer
Donc, construire des affichages étroits et utilisez une requête de support pour détecter des fenêtres plus larges et remplacer la mise en page.
Mise à jour: beaucoup changé depuis 2010 et les requêtes de médias CSS sont à peu près acceptées au niveau mondial et soutenues sur tous les grands navigateurs.
Il y a cette option, vous pouvez même ajouter d'autres si si Déclarations pour smartphones et tablettes.
Il demande une solution non javascript.
typiquement les gens ne "attachent pas une autre feuille de style" pour la résolution de l'écran, car vous pouvez redimensionner le navigateur après la charge de la page, la modification de la résolution et vous ne voulez pas charger de fichier chaque fois que vous le ferez.
Ce sera le Truc, dans un fichier CSS:
ex: ceci doit modifier la taille de la police à 20px lorsque la condition de requête @Media est vraie, dans cette Cas lorsque l'écran est supérieur à 500px. Lorsque vous avez la taille de votre navigateur de haut en bas, vous verrez que les règles conditionnelles CSS prennent effet automatiquement, pas de JS requis.
Vous pouvez également utiliser @media (max-largeur: 500px) pour cibler la taille de l'écran inférieur à 500px, etc. Vous pouvez ajouter une requête de média conditionnelle illimitée des blocs CSS au même fichier CSS / principal, de sorte qu'aucun fichier supplémentaire n'est nécessaire pour une conception sensible simple.