franzsen: Media Queries

Mit

@media screen and (max-width: 1050px) {

}

kann man die Anzeige an andere Viewports anpassen. In diesem Fall eine Änderung ab einer Bildschirmbreite von 1050px.
Nun habe ich mir die unterschiedlichen Macs angesehen. Folgende Breiten gibt es:
11" 1366x768
12" 2304x1440
13" 1440x900, 1280x800, 2560x1600
15" 2880x1800

27" 2560x1440

iPad
2732x2048

Und hier setzt meine Frage an. Ein 27"er hat einen kleineren Bildschirm als ein iPad? Ich weiß, daß es auch um Pixeln geht. Ein Bildschirm gleicher Größe kann mehr Pixeln enthalten beispielsweise Retina-Display. Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

Muß man für jede Bildschirmbreite separat "@media screen ..." anführen? Genügt die Angabe einer Breite da man ja Pads bzw. Smartphones senkrecht halten kann oder muß man sowohl die Höhe und Breite eines Pads/Smartphones berücksichtigen?

Wo gibt es ein Beispiel, daß bei einem Smartphone der Navigator ausgeblendet wird damit das Hauptfenster lesbar bleibt? Das Ausblenden erfolgt ja ebenfalls mit "@media screen ..." aber wohin kommt der Navigator?

--
LG Franz
  1. Hallo

    Du bist leider (mal wieder) auf dem falschen Weg. Dich einzufangen und auf auf den rechten Weg zu leiten ist wahrscheinlich wieder eine Aufgabe ohne Erfolgsaussicht.

    Die Vielfalt der Geräte heutzutage hast du bereits erkannt. Als die Media Queries erdacht wurden war damit nicht zu rechnen.

    Deshalb sind die meisten Möglichkeiten der Media Queries heutzutage in der Praxis nicht sinnvoll anzuwenden.

    Aktuell ist die sinnvollste Vorgehensweise die Media Queries nicht an die Endgeräte / Bildschirmgrößen anzupassen, sondern an den Inhalt der Webseite.

    Der zweitbeste Weg ist die Verwendung von Frameworks mit einem Grid-System wie Bootstrap oder selbsterstellen Grid-Frameworks.

    Deshalb wäre diese Vorgehensweise

    Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

    in der Praxis komplett unsinnig. Das funktioniert schlicht nicht.

    Muß man für jede Bildschirmbreite separat "@media screen ..." anführen?

    Ich habe grade gelesen, dass die aktuellen Geräte über 200 Bildschirmbreiten haben. Willst du wirklich für jede ein Media Query anlegen? Wohl eher nicht.

    aber wohin kommt der Navigator?

    Der wird ausgeblendet und auf Wunsch des Besuchers wieder eingeblendet.

    Gruss

    MrMurphy

    1. Hallo

      Du bist leider (mal wieder) auf dem falschen Weg. Dich einzufangen und auf auf den rechten Weg zu leiten ist wahrscheinlich wieder eine Aufgabe ohne Erfolgsaussicht.

      Danke für die konstruktive Kritik. Wenn man sich in eine Materie einarbeitet kommen halt solche Fragen. Eine Antwort löst halt wieder eine neue Frage auf. Insbesondere CSS hat einige Themenbereiche die nicht auf einmal gestemmt werden können und eine Vielzahl an Möglichkeiten zuläßt.

      Die Vielfalt der Geräte heutzutage hast du bereits erkannt. Als die Media Queries erdacht wurden war damit nicht zu rechnen.

      Das habe ich ja dann richtig erkannt.

      Deshalb sind die meisten Möglichkeiten der Media Queries heutzutage in der Praxis nicht sinnvoll anzuwenden.

      Und woher soll das jemand wissen der beginnt sich mit der Materie näher zu beschäftigen? Nachdem viele mit Smartphones oder Pads surfen wird es ja eine bestimmte Möglichkeit geben?

      Aktuell ist die sinnvollste Vorgehensweise die Media Queries nicht an die Endgeräte / Bildschirmgrößen anzupassen, sondern an den Inhalt der Webseite.

      Ich dachte das wäre selbstredend? Natürlich muß ich das am neuen Viewport testen und dem Inhalt ein entsprechendes Aussehen geben. Die Breite ist meiner Meinung nach insofern wichtig weil ich wissen muß ab welcher Viewportgröße die Media Queries wirken sollen. Die Webseite hat eine Größe von 70 % des Bildschirmes (27") weil sonst alles unförmig erscheinen würde. Man findet diese Einschränkung bei vielen Webseiten. Mein Sohn hat ein Mac Book Pro 13" und hier ist alles noch (soweit) in Ordnung. Problematisch wird es bei einem Pad weil durch die fehlenden 30% alles gedrückt erscheint also habe ich mittels Media Queries ab einer gewissen Größe diese 30% hinzugefügt. Daß das nicht der letzte Weisheit Schluß ist ist mir klar; darum frage ich ja. Mangels eines Pads muß ich einen Bekannten ersuchen sich die Seiten von Zeit zu Zeit anzusehen.

      Der zweitbeste Weg ist die Verwendung von Frameworks mit einem Grid-System wie Bootstrap oder selbsterstellen Grid-Frameworks.

      Da mußt mir etwas näher erklären. Gibt es dazu eine Seite um sich einzulesen?

      Deshalb wäre diese Vorgehensweise

      Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

      in der Praxis komplett unsinnig. Das funktioniert schlicht nicht.

      Muß man für jede Bildschirmbreite separat "@media screen ..." anführen?

      Ich habe grade gelesen, dass die aktuellen Geräte über 200 Bildschirmbreiten haben. Willst du wirklich für jede ein Media Query anlegen? Wohl eher nicht.

      Das habe ich ja selbst festgestellt. Ich habe ja nur ein paar Beispiele angeführt um zu zeigen um was es mir geht. Daraus ergab sich ja meine Frage wie steuere ich die Sache wenn es so viel unterschiedliche Größen gibt und zusätzlich war mir unklar wie man das mit Pixeln lösen soll wenn es gleich große Monitore gibt aber unterschiedliche Pixelanzahl?

      aber wohin kommt der Navigator?

      Der wird ausgeblendet und auf Wunsch des Besuchers wieder eingeblendet.

      Das kenne ich und zwar wird der Navigator auf ein kleines Quadrat geschrumpft das bei Bedarf aufgerufen wird und den Navigator in passender Größe einblendet. Leider finde ich das Beispiel nicht mehr. Anfangs kann man damit nichts anfangen und später erkennt man, daß es eine Lösungsmöglichkeit für die eigene Webseite wäre.

      --
      LG Franz
      1. Hallo

        Ich dachte das wäre selbstredend? Natürlich muß ich das am neuen Viewport testen und dem Inhalt ein entsprechendes Aussehen geben. Die Breite ist meiner Meinung nach insofern wichtig weil ich wissen muß ab welcher Viewportgröße die Media Queries wirken sollen. Die Webseite hat eine Größe von 70 % des Bildschirmes (27") weil sonst alles unförmig erscheinen würde. Man findet diese Einschränkung bei vielen Webseiten. Mein Sohn hat ein Mac Book Pro 13" und hier ist alles noch (soweit) in Ordnung. Problematisch wird es bei einem Pad weil durch die fehlenden 30% alles gedrückt erscheint also habe ich mittels Media Queries ab einer gewissen Größe diese 30% hinzugefügt.

        Das ist wie schon geschrieben ein Problem. Du willst zwanghaft die Geräte / Viewportgröße in die Media Queries hineinzwängen. Das ist falsch.

        Aktuell ist die sinnvollste Vorgehensweise die Media Queries nicht an die Endgeräte / Bildschirmgrößen anzupassen, sondern an den Inhalt der Webseite.

        Das ist alles. Punkt. Fertig. Aus. Nix Gerät, nix Viewportgröße.

        Du brauchst nur die Seite erstellen, schiebst dein Browserfenster zusammen und fügst dort Media Queries ein wo dir das Layout um die Ohren fliegt. Das nennt sich Desktop-First.

        Oder du ziehst das Browserfenster eng zusammen, erstellst die Seite, ziehst das Fenster auseinander und fügst die Media Queries dort ein, wo die zusätzliche Breite sie sinnvoll machen. Das nennt sich dann Mobile-First.

        Ob du bei den Media Queries als Einheit px oder em verwendest spielt technisch keine Rolle. em ist komplizierter, weil du die px vollkommen unnötig in em umrechnen musst.

        Gruss

        MrMurphy

        1. Hallo MrMurphy1,

          Ob du bei den Media Queries als Einheit px oder em verwendest spielt technisch keine Rolle. em ist komplizierter, weil du die px vollkommen unnötig in em umrechnen musst.

          Das ist so nicht richtig. Die Einheit em berücksichtigt die tatsächliche Schriftgröße. Und davon ist abhängig, ob beispielsweise eine Überschrift in eine Zeile passt oder nicht.

          Bis demnächst
          Matthias

          --
          Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
          1. Hallo

            Die Einheit em berücksichtigt die tatsächliche Schriftgröße.

            Schade nur, dass die Aussage in diesem Zusammenhang (mit den Media Queries) keine Rolle spielt und keine Auswirkungen hat.

            Gruss

            MrMurphy

            1. Hallo

              Die Einheit em berücksichtigt die tatsächliche Schriftgröße.

              Schade nur, dass die Aussage in diesem Zusammenhang (mit den Media Queries) keine Rolle spielt und keine Auswirkungen hat.

              Natürlich spielt die Einheit „em“ eine Rolle, weil, auf die im Browser benutzte Schriftgröße bezogen, 50em immer 50em sind, egal, welches Gerät man bei der Hand hat. Deshalb ist ja die Benutzung von em in Mediaqueries der Punkt, der einen Code-Autor von den Displaygrößen unabhängig macht.

              Tschö, Auge

              --
              Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
              Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
              1. Hallo

                Gegen ein falsches Verständnis kommt man leider nicht an. Wenn du daran glauben willst - schön für dich.

                Gruss

                MrMurphy

                1. Hallo,

                  Gegen ein falsches Verständnis kommt man leider nicht an. Wenn du daran glauben willst - schön für dich.

                  Ich glaube da verwechselst du was: Gegen Glaube kommt man nicht mit Argumenten an. Verständnis hängt mit Verstehen eng zusammen, und da lässt sich dran arbeiten.

                  Gruß
                  Kalk

  2. Hallo,

    Nun habe ich mir die unterschiedlichen Macs angesehen.

    besteht deine Zielgruppe nur aus Mac-Usern?

    … Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

    du solltest dir z.B. mal die Größeneinheit „em“ ansehen.

    Gruß Jürgen

    1. Hallo,

      Nun habe ich mir die unterschiedlichen Macs angesehen.

      besteht deine Zielgruppe nur aus Mac-Usern?

      Nein, natürlich nicht. Es ging mir nicht um den Gerätetyp sondern die Größenangaben und wie man das steuern kann. Es gibt natürlich noch Samsung, Motorola, HP TouchPad, usw. Inzwischen ist für mich noch eine Frage aufgetaucht ob es nicht nur auf die Viewport-Größe ankommt, sonder auch auf das System? Es gibt ja IOS, Android und wie sie alle noch heißen. Eine entsprechende information habe ich hier gefunden.

      … Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

      du solltest dir z.B. mal die Größeneinheit „em“ ansehen.

      Nun, soweit ich informiert bin, ihr werdet natürlich einen noch tieferen Einblick haben, haben verschiedene Monitore unterschiedliche Pixelgrößen aber auch die unterschiedlichen Browser spielen eine Rolle. In diesem Falle verwendet man „em“ das die Größe relativ widergibt. Eine Möglichkeit kenne ich indem man dem body eine bestimmte Größe zuweist und alle Elemente innerhalb des body bekommen mit „em“ die relative Größe dazu.

      --
      LG Franz
  3. Servus!

    Und hier setzt meine Frage an.

    Wie steuere ich nun die Anzeige nach der Bildschirmbreite und nicht nach Pixeln?

    Auch wenn es erst einmal nicht nach einer direkten Antwort klingt:

    • Verwende semantisches Markup für deine Inhalte.

    • Überlege Dir, ab wann diese bei einer bestimmten Viewportbreite nicht mehr gut aussehen.

      • Bei Text ist es eigentlich egal, höchstens ein max-width: 60em;, damit die Zeilen nicht zu lang werden.

      • Bei Grafiken und bestimmten Seitenelementen solltest du flexible, prozentuale Breiten verwenden, damit auf breiten Bildschirmen drei oder vier, auf Tablets in landscape-Modus 2 Bilder nebeneinander und auf schmalen Bildschirmen das Bild 100% breit wird.

    • Jetzt erst brauchst du media queries, und zwar wie @@MrMurphy1 sagte, nur 2 oder 3 Medienmerkmale und wie @@JürgenB gesagt hat, mit em als Basis, sodass das Design bei einer größeren Schrift (Strg+ oder ein Fingerauseinanderziehen) angepasst wird.

    Beispiele:

    Muß man für jede Bildschirmbreite separat "@media screen ..." anführen?

    Die Frage ist oben beantwortet.

    Genügt die Angabe einer Breite da man ja Pads bzw. Smartphones senkrecht halten kann oder muß man sowohl die Höhe und Breite eines Pads/Smartphones berücksichtigen?

    Horizontale Scrollbalken solltest Du vermeiden wie der Teufel das Weihwasser, aber vertikal nach unten scrollen macht doch jeder, also nur die Breite!

    Wo gibt es ein Beispiel, daß bei einem Smartphone der Navigator ausgeblendet wird damit das Hauptfenster lesbar bleibt?

    Es steht (fast) alles im Wiki. Stöber mal durch!

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an.
    1. Hallo Matthias,

      • Jetzt erst brauchst du media queries, und zwar wie @@MrMurphy1 sagte, nur 2 oder 3 Medienmerkmale und wie @@JürgenB gesagt hat, mit em als Basis, sodass das Design bei einer größeren Schrift (Strg+ oder ein Fingerauseinanderziehen) angepasst wird.

      Wenn du nur ein @ verwendest kann das auch als Erwähnung erkannt werden: z.B. @JürgenB (bei dem MrMurphy1 gehts nicht weil er sich nicht angemeldet hat).

      LG,
      CK

      1. Servus!

        Wenn du nur ein @ verwendest kann das auch als Erwähnung erkannt werden: z.B. @JürgenB (bei dem MrMurphy1 gehts nicht weil er sich nicht angemeldet hat).

        Danke, meine Forumskenntnisse sind noch ausbaufähig!

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun - packen wir's an.
    2. Danke für Deine hilfreiche Erklärung. Werde alles einmal durcharbeiten. Werden wahrscheinlich dabei wieder einige Fragen auftauchen; warum, wie besser, manchmal werden wieder ein paar Bäume den Wald verdecken, usw. Aber ich darf hoffentlich wieder Fragen an Euch richten.

      Wo gibt es ein Beispiel, daß bei einem Smartphone der Navigator ausgeblendet wird damit das Hauptfenster lesbar bleibt?

      Genau, Navicon heißt es. Ich hab's nicht mehr gefunden.

      Es steht (fast) alles im Wiki. Stöber mal durch!

      Ja, das mache ich ja, aber wenn man nicht weiß wie etwas heißt stöbert man bei der Fülle an Informationen unmengen an Seiten durch.

      --
      LG Franz
      1. Habe mir den „Viewport-Emulator“ geladen. Bekanntlichrweise funktioniert mit IOS hover nicht. Mir fällt auf, daß hier aber „hover“ funktioniert. Wie verläßlich ist diese Methode zum Testen der unterschiedlichen Viewports?

        Auch bei selfhtml/Viewport-Emulator funktioniert hover bei Beispiel 8.

        --
        LG Franz
        1. Hallo franzsen,

          Habe mir den „Viewport-Emulator“ geladen. Bekanntlichrweise funktioniert mit IOS hover nicht. Mir fällt auf, daß hier aber „hover“ funktioniert. Wie verläßlich ist diese Methode zum Testen der unterschiedlichen Viewports?

          Auch bei selfhtml/Viewport-Emulator funktioniert hover bei Beispiel 8.

          Die Viewportemulatoren ändern häufig nur die Bildschirmgröße. Hover oder nicht hover ist keine Frage der Bildschirmabmessungen. Es gibt auch 27-Zoll-Touchgeräte sowie kleine Bildschirme.

          Bis demnächst
          Matthias

          --
          Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
          1. Die Viewportemulatoren ändern häufig nur die Bildschirmgröße. Hover oder nicht hover ist keine Frage der Bildschirmabmessungen. Es gibt auch 27-Zoll-Touchgeräte sowie kleine Bildschirme.

            Danke!
            Noch etwas ist mir aufgefallen. Mit Safari funktioniert der Seitenwechsel normal. Damit ist gemeint, daß, wenn ich bei der Gartenseite oder anderen Seite im Viewport-Emulator einen link betätige, erscheint diese weiterhin im Emulator. Anders ist es bei den Fleischrezepten. Der Aufruf einer neuen Seite (zu Fleischrezepte) erfolgt richtigerweise im Emulator. Wähle ich allerdings dann eine andere Fleischsorte etwa „Rind“ aus, so steigt es aus dem Emulator aus und öffnet diese Seite im Safari-Tab. Liegt es am Emulator oder am Code? Webseite

            --
            LG Franz
            1. Hallo,

              Der Aufruf einer neuen Seite (zu Fleischrezepte) erfolgt richtigerweise im Emulator. Wähle ich allerdings dann eine andere Fleischsorte etwa „Rind“ aus, so steigt es aus dem Emulator aus und öffnet diese Seite im Safari-Tab. Liegt es am Emulator oder am Code?
              Webseite

              letzteres. Die Links zu anderen Kategorien von Fleischgerichten haben das Attribut target="_parent", öffnen den Link also im Elternfenster. Das ist allerdings nur in einem Frameset sinnvoll, ich würde die Attribute an deiner Stelle also komplett rausnehmen.

              Da der Viewport-Emulator die ausgewählte Testseite einfach in einem iframe festgelegter Größe öffnet, ist "_parent" damit das übergeordnete Hauptfenster.

              So long,
               Martin

              1. Hallo,

                Der Aufruf einer neuen Seite (zu Fleischrezepte) erfolgt richtigerweise im Emulator. Wähle ich allerdings dann eine andere Fleischsorte etwa „Rind“ aus, so steigt es aus dem Emulator aus und öffnet diese Seite im Safari-Tab. Liegt es am Emulator oder am Code?
                Webseite

                letzteres. Die Links zu anderen Kategorien von Fleischgerichten haben das Attribut target="_parent", öffnen den Link also im Elternfenster. Das ist allerdings nur in einem Frameset sinnvoll, ich würde die Attribute an deiner Stelle also komplett rausnehmen.

                Da der Viewport-Emulator die ausgewählte Testseite einfach in einem iframe festgelegter Größe öffnet, ist "_parent" damit das übergeordnete Hauptfenster.

                Ja, das wars. Daß man oft das Einfachste nicht sieht.
                Ich habe noch den Navi von der Hauptseite ans Ende gestellt. Bei den links die ein „div-id“ ansteuern wird das Item automatisch zum Hauptfenster und der Navi verschwindet. So sollte es sein. Beim Startfenster wird in ein iframe-Fesnter geladen. Das heißt, daß der Navi bleibt und der Benutzer erkennt nicht gleich ob der link funktioniert hat. Ist es möglich, daß auch hier das iframe zum Hauptfenster wird? Wenn ich also nach unten blättere und „Urheberrecht“ anklicke, soll es nach oben springen. Ist das lösbar wenn ich den Navi ausblende, mit einem Navicon aufrufe und dann einen link wähle? Wird da der Navi wider ausgeblendet bzw. überschrieben?

                --
                LG Franz
  4. Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun - packen wir's an.
    1. Hallo,

      Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

      Danke dafür! Aber hättest du dann diesen Thread nicht als Quelle mitaufführen sollen?

      Gruß
      Kalk

      1. Servus!

        Hallo,

        Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

        Danke dafür! Aber hättest du dann diesen Thread nicht als Quelle mitaufführen sollen?

        ok, stimmt! Nachgetragen!

        Gruß
        Kalk

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun - packen wir's an.
    2. Hallo Matthias Scharwies,

      Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

      Danke für deinen Fleiß.

      min-width vs. max-width könnte noch Berücksichtigung finden.

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
      1. Servus!

        min-width vs. max-width könnte noch Berücksichtigung finden.

        Danke, mach ich heut abend.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun - packen wir's an.
    3. Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

      Ich habe eine Seite auf der die verschiedenen Viewportgrößen kategorisiert werden. Kann man sich diesen Angaben anschließen?

      --
      LG Franz
      1. Servus!

        Ich habe alle Antworten aus diesem Thread mal in einem Wiki-Artikel zusammengefasst:

        Ich habe eine Seite auf der die verschiedenen Viewportgrößen kategorisiert werden. Kann man sich diesen Angaben anschließen?

        Perfekt, vor allem, dass da schon die em-Werte dabei stehen. Habs gleich übernommen - könntest / dürftest Du aber auch selber machen! :-)

        Im "siehe auch" -Bereich drunter findest du weitere Tutorials, die sich mit responsive Webdesign beschäftigen.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun - packen wir's an.