1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Frage zu Media Queries CSS

Dieses Thema im Forum "Allgemeines" wurde erstellt von Zinnbaum, 4. Februar 2016.

  1. Zinnbaum

    Zinnbaum Member

    Registriert seit:
    5. November 2014
    Beiträge:
    6
    Zustimmungen:
    0
    Hallo,

    benötige ich wirklich zu jedem CSS-Responsive-Befehl eine Armada an Queries für die unterschiedlichen mobilen Devices? Laut diesem Artikel (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) wären das ja zig Befehle!! Ich schaue ja hin und wieder mal in die CSS-Dateien von Webseiten, die mir gut gefallen (vor allem auf dem Smartphone) um etwas von guten Leuten zu lernen aber das jemand eine riesige CSS-Datei für das Responsive hat, mit allen dort aufgeführte Variationen an Media Queries ist mir noch nicht begegnet. Kann mir hierzu jemand eine Einschätzung geben, in wie weit das tatsächlich notwendig ist und für welche Seiten sich der Aufwand lohnt.

    Vielen Dank
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    In die Media-Queries gehört alles rein, was sich bei einer bestimmten Größe (min-width / max-width) ändern soll. Also z. B. ein media-query für max- oder min-width 768px und dort alle CSS-Befehle rein, die dann den Standard überschreiben.
     
  3. lurezilla

    lurezilla Member

    Registriert seit:
    27. Dezember 2015
    Beiträge:
    18
    Zustimmungen:
    0
    Der Aufwand hält sich eigentlich in Grenzen - wir nutzen unter lurezilla.de folgendes Prinzip:

    /* ALLGEMEINE CSS FORMATE */

    /* AUSGABE AM PC */
    @media screen and (min-width: 769px) {

    /*PC CSS FORMATE */
    }

    /* SMARTPHONE kleiner als 768px */
    @media screen and (max-width:768px) {
    /* SMARTPHONE CSS FORMATE */
    }
     
    #3 lurezilla, 4. Februar 2016
    Zuletzt von einem Moderator bearbeitet: 4. Februar 2016
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Und wer Tablets z. B. noch anders gestalten will, nimmt noch einen Media-Query dazu.
     
  5. Zinnbaum

    Zinnbaum Member

    Registriert seit:
    5. November 2014
    Beiträge:
    6
    Zustimmungen:
    0
    Ok, verstehe. Die Vielzahl der unterschiedlichen Media Queries dient also dem Zweck unterschiedliche Webseiten-Ansichten für unterschiedliche Mobile Devices zu gestalten. Der Normalfall aber, wenn ich es richtig verstehe, unterscheidet nur zwischen Desktop-Variante und Mobiler-Variante (was Smartphones, Android, iOS, Tabletes, usw.) umfasst. Ist das so korrekt?

    Denn spezielles CSS für Apple-Geräte wie im Beispiel oben gezeigt (oder im folgenden Ausschnitt) waren mir neu:

    /* ----------- iPad mini ----------- *//* Portrait and Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 1 and 2 ----------- *//* Portrait and Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 3 and 4 ----------- *//* Portrait and Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}
     
  6. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    bei den media-queries sind keine Grenzen gesetzt. Kommt auf deine Anforderungen/Ansprüche an.
     
  7. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ja. Und es kommt einfach auch auf das Design und auch auf die Inhalte an. Nicht jede Webseite hat eine waagrechte Navigationsleiste. Nicht bei jeder Webseite mit waagrechter Navigationsleiste nehmen die einzelnen Navigationspunkte die gleiche Breite ein. Was in dem einen Zusammenhang gut funktioniert (auch gestalterisch) geht in einem anderen Zusammenhang gar nicht …

    Die grundsätzliche Antwort bleibt also immer noch Post#2 von SirEctor.
    Und meine Antwort auf die (nicht gestellte) Frage, wie man diese Media Queries sinnvoll plant und anlegt, wäre der Hinweis, mal die Suchmaschine des Vertrauens nach „mobile first“ zu befragen.

    Gruß
    helix
     
  8. Zinnbaum

    Zinnbaum Member

    Registriert seit:
    5. November 2014
    Beiträge:
    6
    Zustimmungen:
    0
    Vielen Dank für die vielen Antworten. Mir ging es ja primär um die vielen unterschiedlichen Media Querys, weniger um die allgemeine Anwendung und Sinnhaftigkeit derer. Aber ich habe es trotzdem verstanden. In nur wenigen Projekten braucht man unterschiedliche Darstellungen auf dem iPad zum Google Nexus, bzw. bei kleinen Projekten macht es wohl sowieso nur sehr selten Sinn - einfach weil die Ressourcen knapp und die Kompetenzen beschränkt sind. Da liegen die Prioritäten sinnvollerweise oftmals bei anderen Aufgabenbereichen. Danke für alle Antworten.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden