Détecter la largeur de l'écran avec les CSS Media Queries

Je suppose que parce que vous pouvez le faire avec les Requêtes de Média:

@media (min-width:500px) { … }

Que, à un moment ou à un autre, la feuille de style CSS doit savoir quelle largeur de l'écran, sans Javascript.

Est-ce le cas?

OriginalL'auteur benhowdle89 | 2011-08-13

  1. 7

    Vous pouvez utiliser device-width qui mettra à l'épreuve de la largeur de l'écran en px. Cela n'est cependant pas entièrement recommandé. Utilisation max-width et min-width (par la fenêtre) à la place.

    Si vous essayez d'OBTENIR la largeur de l'écran et de l'utiliser (quelque chose comme content: (device-width);, de la sorte, ce n'est pas possible. Bâton avec JavaScript.

    Manuel De Référence

    OriginalL'auteur Madara Uchiha

  2. 2

    Que le navigateur client de la fenêtre change de taille, le navigateur va repeindre la zone visible. À ce point dans le temps, le navigateur vérifie si il y a une media query styles qui sont pertinentes pour la nouvelle fenêtre d'affichage.

    Le CSS ne sais pas vraiment quoi la largeur du navigateur de la fenêtre d'affichage est, autant que le navigateur sait ce que CSS est applicable pour une fenêtre.

    Ah, merci pour la réponse détaillée, de sorte qu'un CSS seule solution pour saisir la taille de l'écran n'est pas?
    L'avantage de requêtes de média que vous pouvez réagir à certains attributs de la fenêtre, si bien que vous ne pouvez pas déterminer sa taille exacte, vous pouvez ajuster votre contenu de la représentation par la prévision et de la comptabilité de la fenêtre d'affichage étant à l'intérieur de certaines limites prévues.
    Vous pouvez trouver alistapart.com/articles/responsive-web-design pour être une lecture intéressante.
    Merci pour le lien, je suis très familier avec le Responsive Web Design et les demandes des Médias, j'ai été plus penser si je pouvais tirer parti de leur pouvoir de saisir la taille de l'écran 🙂
    Ce n'est pas vrai. Vous avez device-width

    OriginalL'auteur Chris

  3. 0

    Bien...

    @media(width:1024px){
  p#id:after{
    content:"1024px";
  }
}

    Si la largeur de la fenêtre d'affichage est de 1024 pixels, cela affiche le texte "1024px" après désignées <p> élément. Vous pouvez (en théorie) mettre à plusieurs milliers de blocs de CSS pour l'affichage de la largeur de la fenêtre d'affichage, pour une valeur raisonnable de sa largeur. (Notez que le texte n'est pas sélectionnable dans certains navigateurs.)

    Le plus vous savez... (merci de ne pas faire ça)

    OriginalL'auteur Steve