nicht angemeldet
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Matthias Apsel
Moin Allerseits
ich beschäftige mit gerade zum ersten Mal mit der Erstellung von CSS-Regeln für mobile Endgeräte und hab da einige Verständnisfragen bez. Mediaqueries. Es wäre toll wenn hier mal jemand einem alten Mann über die Strasse helfen könnte
Vom Ansatz her scheint es ja nicht so wahnsinnig kompliziert zu sein - man schreibt für bestimmte Browserfenstergrößen oder Displaygrößen unterschiedliche Regeln ... Aber....
1: sind folgende Aussagen korrekt?
a: @media only screen and (width : 320px) greift nur bei einer Breite von genau 320px?
b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px
Eine einfache Frage:
Werden "only" und "not" noch unterstützt?
Und jetzt zu einigen Fragen die ich vielleicht nicht besonders verständlich formulieren kann:
Frage eins:
Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width"). Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ? Die des Gerätes (320) oder die Breite die es jetzt quasi geometrisch einnimmt - also 480? Muss ich also zwei Mediaqueries für ein und das selbe Gerät anlegen (Hochformat & Querformat)?
Frage zwei:
Ich will ein Gerät ansprechen das 320 x 480 hat. Dann habe ich ein weiteres Exotengerät mit 380 x 460 für das ich andere Regeln brauche. Wie müssen nun die Queries lauten?
Was ich bereits herausfinden konnte ist, dass das hier nicht geht: @media only screen and (min-width : 320px) and (max-width : 480px) @media only screen and (min-width : 380px) and (max-width : 460px) Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist) greift aber auch nicht. Was auch nicht geht ist das: @media only screen and (width : 380px) denn das würde dazu führen das diese Regeln auch für alle Telefone mit 320 x 480 gelten. Und genau das ist mein grösstes Verständnisproblem. Wie kann ich etappenweise Media-Queries aufbauen?
Und dann..... hab ich gelesen das es ja auch noch so was gibt: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) Wieso braucht es denn jetzt noch die Angabe zur Lage wenn es doch ohnehin um die durch Drehen nicht veränderbare physikalische Breite des Geräts geht??
Man sieht also: Ich bin unter anderem durch die gleichzeitige Verwendung der Attribute "Orientation" & "Width" irritiert.
Gruß Axel
Hallo Axel Ernst,
Ich will ein Gerät ansprechen das 320 x 480 hat. Dann habe ich ein weiteres Exotengerät mit 380 x 460 für das ich andere Regeln brauche.
Und dann kommt das nächste Gerät und das nächste und das nächste.
Vergiss, dass es die Einheit Pixel überhaupt gibt. Setze deine Breakpoints in der Einheit em.
Für den Anfang: https://wiki.selfhtml.org/wiki/Mq sowie https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten und https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Maße_und_Maßeinheiten#Relative_L.C3.A4ngenma.C3.9Fe https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Maße_und_Maßeinheiten/em
Bis demnächst
Matthias
Hallo!
a: @media only screen and (width : 320px) greift nur bei einer Breite von genau 320px?
Ja,
b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px
Ja, einschließlich 320px und 480px.
Werden "only" und "not" noch unterstützt?
Ja. Wieso sollten sie nicht mehr unterstützt werden? 😀
"only" wird praktisch nur verwendet, um die Regel vor alten Browsern zu verstecken (ich glaub das ist nicht mehr nötig). Und "not" ist sehr selten in Gebrauch.
Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width"). Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ? Die des Gerätes (320) oder die Breite die es jetzt quasi geometrisch einnimmt - also 480?
Letzteres. Beim Kippen ändert sich sowohl die "width" (Viewport) als auch die "device-width" (Display).
Für den Landscape-Mode kannst du daher ebenfalls "min-width: 480px" verwenden.
Muss ich also zwei Mediaqueries für ein und das selbe Gerät anlegen (Hochformat & Querformat)?
Wenn du unterschiedliche Formate/Layouts für die unterschiedlichen Viewportbreiten haben willst, dann ja.
Ich will ein Gerät ansprechen das 320 x 480 hat. Dann habe ich ein weiteres Exotengerät mit 380 x 460 für das ich andere Regeln brauche. Wie müssen nun die Queries lauten?
Warum brauchst du da andere Regeln...?
Der Sinn von Media Queries ist nicht gesonderte Formatierungen für jede mögliche Breiten-Höhen-Kombination zu schreiben. Das wären unzählige. Du schreibst Media Queries, wie es zum guten Layouten deiner Inhalte sinnvoll ist. Mehr nicht.
Die Frage ist ob sich deine Inhalte anders verhalten sollen bei 320px vs. 380px. Das kann ich dir nicht beantworten. Wahrscheinlich ist es nicht zwingend nötig hier einen Breakpoint zu machen.
Was ich bereits herausfinden konnte ist, dass das hier nicht geht: @media only screen and (min-width : 320px) and (max-width : 480px) @media only screen and (min-width : 380px) and (max-width : 460px) Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist) greift aber auch nicht. Was auch nicht geht ist das: @media only screen and (width : 380px) denn das würde dazu führen das diese Regeln auch für alle Telefone mit 320 x 480 gelten. Und genau das ist mein grösstes Verständnisproblem. Wie kann ich etappenweise Media-Queries aufbauen?
Was du mit etappenweise meist, verstehe ich nicht ganz. Es gibt verschiedene Ansätze, wie man Media Queries aufbaut. Die sogenannten "stacked MQs" und die "overlapping MQs" (siehe).
Bei den stacked MQs überschreiben sich Regeln nicht, bei den overlapping MQs überschreiben Regeln für größere Viewports die für kleinere Viewports.
Beispiele mit zwei Breakpoints bei 320px und 640px:
Stacked:
/* für Viewport-Breiten von 0px bis einschließlich 319px */
@media (max-width: 319px) {
.foo { color: red }
}
/* für Viewport-Breiten von 320px bis einschließlich 639px */
@media (min-width: 320px) and (max-width: 639px) {
.foo { color: blue }
}
/* für Viewport-Breiten von 640px bis unendlich */
@media (min-width: 640px) {
.foo { color: green }
}
Overlapping:
/* für alle Viewport-Breiten */
.foo { color: red }
/* für Viewport-Breiten von 320px bis unendlich, überschreibt die Regel oben */
@media (min-width: 320px) {
.foo { color: blue }
}
/* für Viewport-Breiten von 640px bis unendlich, überschreibt die Regeln oben */
@media (min-width: 640px) {
.foo { color: green }
}
(ungetestet)
Welchen Ansatz du wählst ist dir überlassen. Beide haben Vor- und Nachteile. Ich würde "overlapping" empfehlen in der Annahme dass du für größere Viewports wahrsch. nur wenige Regeln überschreiben musst.
Und dann..... hab ich gelesen das es ja auch noch so was gibt: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) Wieso braucht es denn jetzt noch die Angabe zur Lage wenn es doch ohnehin um die durch Drehen nicht veränderbare physikalische Breite des Geräts geht??
Das braucht man i. d. R. nicht! Für ein anpassbares Layout ist die Viewport Breite und manchmal auch die Viewport Höhe interessant. Es ist meist nicht wichtig wie das Gerät gehalten wird.
Grüße Danny
@@Axel Ernst
a: @media only screen and (width : 320px) greift nur bei einer Breite von genau 320px?
So isses. Der media query ist sinnfrei.
b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px
So isses.
Werden "only" und "not" noch unterstützt?
Bei not ist eher die Frage „schon“ angebracht.
Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width").
Ersteres solltest du verwenden, letzteres vergessen.
Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ?
Gar keine. Sondern orientation.
Ich will ein Gerät ansprechen das 320 x 480 hat.
Nei-en. Das wären media queries falsch verwendet. Denkfehler.
Media queries sollten sich nicht nach gerade(!!) gängigen Geräten richten, sondern nach dem dargestellten Inhalt. Und auch nicht in px angegeben werden, sondern in em.
Was ich bereits herausfinden konnte ist, dass das hier nicht geht: @media only screen and (min-width : 320px) and (max-width : 480px) @media only screen and (min-width : 380px) and (max-width : 460px) Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist)
Doch.
greift aber auch nicht.
Doch.
Der zweite greift von 380px bis 460px und überschreibt den ersten.
Der erste wirkt damit also von 320px bis 379px und von 461px bis 480px.
Wie kann ich etappenweise Media-Queries aufbauen?
Meist sinnvoll: overlapping, nicht stacking. also nicht min-width und max-width in einem media query.
Meinst sinnvoll: mobile first, also von klein nach groß.
Grundsätzliche Angaben ohne media query. Die wirken bei schmalen Viewports.
Wenn es der Inhalt erfordert, einen Breakpoint mit min-width setzen. Dafür dann die Regeln angeben, die zusätzlich gelten.
Wenn es der Inhalt erfordert, einen weiteren Breakpoint mit min-width setzen. Dafür dann die Regeln angeben, die zusätzlich gelten.
Wenn es der Inhalt erfordert …
LLAP 🖖
SUPER. Vielen Dank an alle. Das waren jetzt zwar viele, aber auch genau die Infos die ich brauchte. Werde mich ab heute abend intensiv damit beschäftigen und mich sicher wieder rückmelden.
Das es relative Werte wie "em" und nicht "px" sein müssen ist mir klar. Ist nur durch "copy/paste" von anderen "Tutorial-Websites" durchgerutscht
Noch eine Frage an Gunnar Bittersmann. Bist Du Dir hier sicher?:
Doch.
greift aber auch nicht.
Doch.
Der zweite greift von 380px bis 460px und überschreibt den ersten.
Der erste wirkt damit also von 320px bis 379px und von 461px bis 480px.
Ich hatte das gestern noch getestet und es sah so aus als ob nicht.
Gruß Axel
@@Axel Ernst
Noch eine Frage an Gunnar Bittersmann. Bist Du Dir hier sicher?:
Der zweite greift von 380px bis 460px und überschreibt den ersten.
Der erste wirkt damit also von 320px bis 379px und von 461px bis 480px.
Ich hatte das gestern noch getestet und es sah so aus als ob nicht.
Ja, ich bin mir sicher.
Du kannst ja mal in diesem Pen die Viewportgröße ändern (den Balken zwischen Code und Ausgabe anfassen und hin- und herschieben).
Irgendwann wird’s das Weiß zu Lila, dann orange, dann wieder lila, dann wieder weiß.
LLAP 🖖
Hallo Gunnar Bittersmann Vielen Dank für die Demo. Bin überzeugt. ;-) Schönes Tool - dieses Code-Pen - kannte ich noch nicht.
Vielleicht sollte ich mal erzählen warum ich mich damit überhaupt intensiver beschäftigen muss (Nicht das sich hinterher rausstellt das ich mich komplett verrannt habe)
Das hier ist die Entwicklungsumgebung unserer neuen Website:
http://dpg.4lke.de
Es gibt hier eigentlich nur 3 Punkte derentwegen ich mich damit beschäftigen muss.
1: Der obere Bereich mit Logo & den beiden Buttons (kleines Problem)
2: Kleinere Anpassungen am Menu (kleines Problem)
3: Die orangefarbene Menubox links neben dem Bild (größeres Problem).
http://dpg.4lke.de/leistungen/digitaldruck/
Während das Bild nahtlos skaliert tut es die Box nicht und dafür brauch ich eine Lösung. Nachdem ich jetzt bereits schon viel gelesen habe und auch mit Vielen darüber kommunizierte kam ich zu dem Schluß das die Verwendung von MQs der richtige Lösungsansatz wäre.
Vielleicht hat ja jemand mal Lust zu sagen ob ich auf der richtigen Fährte bin?
Gruß Axel
PS: Verrät mir noch jemand wie man mit Markdown "neue Zeile" bzws "Absatz" erzeugt?
Hallo Axel Ernst,
PS: Verrät mir noch jemand wie man mit Markdown "neue Zeile" bzws "Absatz" erzeugt?
Oberhalb des Antwortfeldes steht „Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.“ Die Links kann man anklicken. Interessant ist der letzte.
Bis demnächst
Matthias
Hallo Matthias,
ich darf Dir versichern das ich erst recherchiere & lese bevor ich frage. Rosen sind rot und aus oben Gesagtem muss man folgern das ich dort keine Antwort auf meine Frage gefunden habe oder zu dumm bin sie zu verstehen.
In jedem der genannten Fälle gebietet es die Höflichkeit den ohnehin bereits unter seiner Dummheit leidenden Fragesteller nicht erneut bloßzustellen.
Danke für Deine Hilfe.
Gruß Axel
Hallo Axel Ernst,
PS: Verrät mir noch jemand wie man mit Markdown "neue Zeile" bzws "Absatz" erzeugt? Oberhalb des Antwortfeldes steht „Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.“ Die Links kann man anklicken. Interessant ist der letzte.
ich darf Dir versichern das ich erst recherchiere & lese bevor ich frage. Rosen sind rot und aus oben Gesagtem muss man folgern das ich dort keine Antwort auf meine Frage gefunden habe oder zu dumm bin sie zu verstehen.
Du hast den Text „Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.“ oberhalb des Textfeldes, in das du deine Antwort schreibst, gefunden?
Du hast den Link „Hilfe bei der Formatierung Ihrer Beiträge“ geklickt?
Du bist im Wiki gelandet (SELFHTML:Forum/Bedienung)?
Dort hast du „Absätze und Zeilenumbrüche“ gefunden?
Absätze und andere Blockelemente werden in Leerzeilen eingeschlossen, für einen einfachen Zeilenumbruch setzen Sie zwei Leerzeichen an das Zeilenende.
Das sollte deine Frage beantworten, wenn nicht, sag uns, was du nicht verstehst oder wie man das anders formulieren muss.
Bis demnächst
Matthias
Hallo Matthias,
alles OK. Ich akzeptiere die Hierarchie und ja - ich habe den Satz inzwischen gefunden.
Ein: "Schau hier:
https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Bedienung#Abs.C3.A4tze_und_Zeilenumbr.C3.BCche
für einen einfachen Zeilenumbruch setzen Sie zwei Leerzeichen an das Zeilenende" hätte doch auch gereicht.
Trotzdem Danke Gruß Axel
Hallo Axel Ernst,
Du bist ja nicht der erste, der so seine Schwierigkeiten mit markdown hat und wirst auch nicht der letzte sein, deshalb wäre es schon wichtig, wenn wir Möglichkeiten aufgezeigt bekommen, wie wir es besser machen können.
Bis demnächst
Matthias