CSS Media Queries

Ich versuche mich anzupassen, meine tablet-web-app für den Einsatz auf Handys. Die Media-Query-Funktionalität scheint perfekt und meine ersten Tests bestätigt. Die Frage die ich habe ist: mit Handys und tablets, ändern Sie die Orientierung von hochformat auf Querformat (bei Drehung des Geräts) was bedeutet max-width dann finden?

In anderen Worten, die größeren Android-Handys haben Auflösungen entlang der Linien von 480x800, das iPhone4 hat eine Auflösung von 640x960, und die original Blackberry Torch hat eine Auflösung von 360x480. Diese sind alle Auflösungen (B x H), wenn die Geräte-statt im hochformat, so dass die breiten sind 400, 640, 360 beziehungsweise. Allerdings, wenn Sie drehen Sie das Gerät ins Querformat, ist die Höhe 'wird' die Breite für die Anzeige Zwecke. So dass die effektive Breite im Querformat werden dann 800, 960 und 480 beziehungsweise, und die 800 und 960 breiten überlappung mit tablet-Landschaft breiten, die vermasselt die Anzeige.

So, ist Breite immer der Breite? Das heißt, wenn das Gerät meldet seinen Dimensionen, hat der width-Wert immer die gleichen bleiben für CSS-Zwecke, oder muss der Wert für die Breite ändern, wenn das Gerät dreht sich um die Landschaft?

Dank an Euch alle im Voraus.

  • Sicherlich wäre es einfach die Art und Weise ändern, Menschen können sich ändern Sie Ihre Bildschirmauflösung auf einem PC?
InformationsquelleAutor robert smith | 2012-01-21
  1. 6

    Der Wert für die Breite wird sich ändern, wenn das Gerät umgedreht wird, weil die Breite der Seite angezeigt wird ändern sich auch.

    Wenn Sie möchten, um die Abfrage, ob das Gerät im landscape-oder portrait-Modus, können Sie mit der orientation-Eigenschaft statt:

    @media screen and (orientation: portrait) {
}

    Diese wird überprüft, wenn die Breite des Browserfensters größer ist als die Höhe (orientation:landscape tun das Gegenteil). Für die besten Ergebnisse, werden Sie wahrscheinlich benötigen, um eine Kombination von vielen MQ-Eigenschaften mit Hilfe des 'und' - operator zu verketten tests. also:

    @media screen and (orientation: landscape) and (max-width: 960px) {
}

    eine vollständige Liste der MQ-Eigenschaften verfügbar ist hier.

    • ein weiterer Punkt, der dazu beitragen kann - in der Breite ist eigentlich die Breite des browser-Fensters. device-width " gibt die Breite von dem Bildschirm des Geräts. Sowohl die Breite & device-width wird sich ändern, wenn das Gerät umgedreht wird, aber device-width berechnet die Breite des Bildschirms, während die Breite berechnet den Bereich des browser-viewport (Display minus Scrollbalken, oder Browser-Menüleisten).
    • Vielen Dank für die Antworten, Sie halfen.
    InformationsquelleAutor 1nfiniti
  2. 2

    Wert der css-änderungen basierend auf die Landschaft oder nicht auf dem Handy, als Breite und Höhe der Anzeige ändert sich auf dem Handy, wenn das Telefon oder tablet gedreht wird. Sie müssen sich also im speziellen bei der Definition der css-Stil auf den Gegner, was Sie wollen.

    @media(min-width: 700px) and (orientation: landscape){

    }

    detail-Verständnis von Medien-Anfragen besuchen Sie: http://letsdopractice.com/css-media-queries/

    InformationsquelleAutor Jay Patel
  3. -5

    Die media-queries verwendet werden, um zu definieren, Stil für unterschiedliche Bildschirm-Größe. Ich werde Ihnen sagen, über die Grundlagen, über media queries.
    Die syntax von CSS-media-Query ist:

    @media not|only mediatype and (media feature) {
CSS-Code;
}

    Für eine detaillierte über media query syntax toturial bitte besuchen Sie Diese Website

    • Dies ist nicht eine Antwort auf die Frage.
    • Ich gab eine Allgemeine Antwort. es kann hilfreich sein für andere.
    InformationsquelleAutor Sajid
Schreibe einen Kommentar