instruction conditionnelle pour la résolution de l'écran?

Je voudrais utiliser une instruction conditionnelle pour joindre une autre feuille de style pour l':

if the clients resolution is <= 1024*768

Je suis sûr que cela est possible, mais n'ont jamais vu le code avant?

ps. Je ne suis pas à la recherche d'une solution d'activer javascript

OriginalL'auteur Haroldo | 2010-07-07

  1. 11

    CSS 3 introduit les media queries, mais il est nouveau et prise en charge n'est pas du tout répandue encore (Firefox uniquement introduite dans la version 3.5, par exemple, et Internet Explorer ne sera pas jusqu'à la version 9) afin de construire avec l'amélioration progressive de l'esprit. CSS Astuces a un tutoriel pour fournir autre feuille de style CSS pour différentes taille de fenêtre de navigateur (ce qui est un plus utile métrique puis la résolution de l'affichage).

    Vous pouvez tester le support de votre navigateur.

    oui, c'est une honte qu'il existe une forte corrélation entre 1024*768 et les anciens navigateurs (pas de css3)! - avec les netbooks sur la hausse des res-css correllation peut changer
    Afin de construire pour une affiche, et l'utilisation d'un media query pour détecter plus large de windows et remplacer la mise en page.
    Mise à jour: beaucoup changé depuis 2010 et CSS media queries sont assez bien acceptée à l'échelle mondiale maintenant et pris en charge sur tous les principaux navigateurs

    OriginalL'auteur Quentin

  2. 13

    Généralement les gens ne sont pas "joindre une autre feuille de style" pour la résolution de l'écran parce que vous pouvez redimensionner le navigateur après le chargement de la page, changer la résolution, et vous ne voulez pas de chargement de fichiers chaque fois que vous le faites.

    Cela fera l'affaire, dans un fichier CSS:

    Ex:

    /* css as usual */
.this-class { font-size: 12px; }

/* condition for screen size minimum of 500px */
@media (min-width:500px) {

  /* your conditional /responsive CSS inside this condition */

  .this-class { font-size: 20px; }

}

    Cela devrait changer la taille de la police de 20px lorsque le @media query condition est vraie, dans ce cas, lorsque l'écran est plus de 500px.

    Que vous la taille de votre navigateur, en haut et en bas, vous verrez le conditionnel CSS règles prennent effet automatiquement, pas de JS nécessaires.

    bonne réponse, upvoted 😀

    OriginalL'auteur OG Sean

  3. 4

    Il y a cette option, totalement du côté client et du javascript moteur, ajouter une balise script:

    <script type="text/javascript">

if (screen.height < 900) { 

document.write('<link href="UrLowRes.css" type="text/css" />');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" />');

} 

</script>

    Vous pouvez même ajouter d'autres if consolidés pour les smartphones et les tablettes.

    il demande à un non-javascript solution.

    OriginalL'auteur frenchie