Erkennen-Bildschirm Breite mit CSS Media Queries

Ich vermute, dass da Sie dies tun können mit Media Queries:

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

Dass bei einigen oder anderen Punkt, den CSS-stylesheet muss wissen, welche Breite der Bildschirm ist, und das ohne Javascript.

Ist das der Fall?

InformationsquelleAutor benhowdle89 | 2011-08-13

  1. 7

    Können Sie device-width die test der Bildschirm-Breite in px. Das jedoch ist nicht ganz zu empfehlen. Verwenden max-width und min-width (für den viewport) statt.

    Wenn Sie versuchen, um die Bildschirm-Breite und verwenden Sie es (so etwas wie content: (device-width); irgendeiner Art, das ist nicht möglich. Stick mit JavaScript.

    Referenz-Handbuch

    InformationsquelleAutor Madara Uchiha

  2. 2

    Als client-browser-viewport-Größe ändert, wird der browser aktualisiert den sichtbaren Bereich. Zu diesem Zeitpunkt wird der browser überprüfen, ob gibt es die media-query-Stile, die relevant sind für den neuen viewport.

    CSS nicht wirklich wissen, was der Breite des browser-Viewports ist, nur so viel, wie der browser weiß, was CSS ist anwendbar für einen bestimmten viewport.

    Ah, danke für die ausführliche Antwort, also eine CSS-Lösung zu greifen-Bildschirm Größe ist ein no-no?
    Der Vorteil von media queries ist, dass Sie reagieren können, um bestimmte Attribute des Viewports, also, während Sie können nicht bestimmen, Ihre genaue Größe, Sie können Ihre Inhalte, die Darstellung von Vorhersage-und Rechnungswesen für den viewport innerhalb bestimmter erwarteter Grenzen.
    Möglicherweise finden Sie alistapart.com/articles/responsive-web-design, um ein Informatives Lesen.
    Danke für den link, ich bin sehr vertraut mit Responsive Web Design und Media Queries, war ich mehr denken, wenn ich könnte, nutzen Ihre macht zu greifen, Bildschirmgröße 🙂
    Das ist nicht wahr. Sie haben device-width

    InformationsquelleAutor Chris

  3. 0

    Gut...

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

    Wenn die Breite des Viewports ist 1024 Pixel, dieses zeigt den text "1024px" nachdem der designierte <p> - element. Sie könnten (rein hypothetisch) mehrere tausend solcher Blöcke von CSS zur Darstellung der Breite des Viewports, für jeden vernünftigen Wert der Breite. (Beachten Sie, dass der text nicht auswählbar in einigen Browsern.)

    Je mehr Sie wissen... (bitte nicht wirklich tun)

    InformationsquelleAutor Steve

Schreibe einen Kommentar