Frage zu Media Queries CSS

    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/m…andard-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

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    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 */
    }

    Einmal editiert, zuletzt von maxe (4. Februar 2016 um 22:57)

    Und wer Tablets z. B. noch anders gestalten will, nimmt noch einen Media-Query dazu.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    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:

    [COLOR=#777777][FONT=Source Code Pro]/* ----------- iPad mini ----------- */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait and Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* ----------- iPad 1 and 2 ----------- */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait and Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* ----------- iPad 3 and 4 ----------- */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait and Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Portrait */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#777777][FONT=Source Code Pro]/* Landscape */[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=#DFC48C][FONT=Source Code Pro] Media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) [/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]{[/FONT][/COLOR][COLOR=#CD6A51][FONT=Source Code Pro][/FONT][/COLOR][COLOR=white][FONT=Source Code Pro]}[/FONT][/COLOR]

    bei den media-queries sind keine Grenzen gesetzt. Kommt auf deine Anforderungen/Ansprüche an.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    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

    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden