Media Queries Standardwerte

[hdd_1]

Hallo

Wenn ich meine Webseite Responsiv (gut les und navigierbar für Tablets/ Smartphones) machen will, dann brauche ich CSS/Media Queries.

zb:

@media only screen and (min-width: 768px){
  .text-a {
    height: 500px;
    width:450px;
    margin-left: 12%;
  }}

Welche andere PX (Zahlen) sollten noch berücksichtig werden ausser min-width: 768px ?

Ich habe so gedacht:

• (min-width: 320px)
• (min-width: 550px)
• (min-width: 768px)
• (min-width: 960px)

Wäre es so in Ordnung? oder braucht es zb. 320px nicht ?


Danke.

 

[fakerer]

Hi,
also ich denke mal da ist alles in Ordnung was einem als sinnvoll erscheint

ich mache meist 480, 768, 992, 1200 übernommen vom twitter bootstrap Framework welches glaub ich das im Moment am weitesten verbreitet ist.

foundation nimmt 641, 1025, 1441, 1921 wobei ich mir dabei denke das es bestimmt besser ist unten abzustufen also ob

 

[CrazyLopp]

320px brauchst Du in der Regel nicht, außer Du möchtest noch ältere Geräte unterstützen. Ich glaube mich zu erinnern das ein Blackberry noch das weit verbreitetste Gerät ist welches mit einer Auflösung von maximal 320px auskommt (in Europa).

 

[Myhar]

Da sagt jeder man sollte em verwenden bei mediaqueries und dann verwendet man erst wieder pixel :/
Also bitte keine der angegeben px Werte nehmen sondern lieber relativ arbeiten, wenn man schon responsive werden will.

 

[msa1989]

@Myhar
Hab mir den Artikel jetzt nicht komplett durchgelesen, aber wenn das vorgehen so viel klüger ist, warum verwendet dann z.B. Bootstrap oder nahezu jedes gute Theme was man auf themeforest oder ähnliches kaufen kann immer die px - Querys?
Ich denke mir immer, dass dort Leute sitzen die sehr viel schlauer sind als ich und noch ganz viele andere. Die werden schon wissen was sie tun.
Ich kenn mich in der Materie zu wenig aus, aber eventuell gibt es ja doch noch einen Nachteil wenn man es komplett relativ gestaltet?

 

[patrick_l]

Da sagt jeder man sollte em verwenden bei mediaqueries und dann verwendet man erst wieder pixel :/

Dir muss ich es sicher nicht sagen. Dennoch hier erwähne . EM (em) ist ein relativer Wert. Pixel (px) hingegen, sowohl relativ als auch absolut. Hinzu kommen weitere Einheiten. Wobei der Rest mit Ausnahme von % und den Schlüsselwörtern (small, larger etc.) für die Darstellung auf einem Monitor / Display ungeeignet sind.

Wenn man so will, kommen Media Queries einer "if or else" Abfrage, wie man es aus z.B. aus JavaScript kennt, gleich. Sicher macht auch EM sinn, Pixel ist an dieser Stelle jedoch auch nicht falsch, geschweige denn weniger sinnvoll. Davon ab Responsive Webdesign absolute Werte nicht verbietet bzw. per se ausschließt.

Durch die fixen Werte werden ja an sich Devices gruppiert und erst dann mit den Werten formatiert, wenn sie dem Media Querie entsprechen. Simples Ausschlussverfahren. Zumal kein Gerät explizit angesprochen wird. Wäre dann ja noch mehr Fluch als Segen. Es ja eh ein leichtes ist, einer Website etwas vorzugaukeln.

Liebe Grüße, Patrick

 

[Myhar]

Das stimmt, ich weiß schon, dass es ein einfaches if-else ist. Aber hast du dir den von mir verlinkten Artikel überhaupt durchgelesen?
Es ist genauso möglich mit em diese Abfragen zu machen wie mit px (60em für 960px bei Standardeinstellung -> ipad oder so is das glaub ich) und man ist dadurch viel flexibler als mit px-Werten. Deshalb verstehe ich nicht, wie man px-Werte bei mediaqueries empfehlen kann.

@Myhar
Hab mir den Artikel jetzt nicht komplett durchgelesen, aber wenn das vorgehen so viel klüger ist, warum verwendet dann z.B. Bootstrap oder nahezu jedes gute Theme was man auf themeforest oder ähnliches kaufen kann immer die px - Querys?

Weil auch diese nur von Menschen gemacht werden und es natürlich immer zwei Ansichten gibt. Es ist ja auch nicht falsch, es ist nur anders (und aus meiner Sicht nicht zu empfehlen)

Es gibt bei bootstrap eine laaange Diskussion darüber mit dem Ergebnis, dass von px auf em umgestellt wird. (ganz runter scrollen)
Das soll heißen: Man darf sich ruhig bei den großen etwas abschauen, aber man darf nicht alles blind nachmachen, man darf sich auch mal trauen etwas anders (besser?) zu machen.


Edit sagt Sorry für den doppelpost

 

[patrick_l]

Aber hast du dir den von mir verlinkten Artikel überhaupt durchgelesen?

Das habe ich, nicht nur einmal. Auch ähnliche Artikel bereits gelesen oder anderer Orts Diskussionen mitverfolge.

Deshalb verstehe ich nicht, wie man px-Werte bei mediaqueries empfehlen kann.

Ich sehe schon, nicht ganz ausgesprochen bzw. erläutert was ich meine. Es gibt durch aus Situationen, in denen man bewusst nicht möchte, das Werte geändert werden. EM richtet sich nach den User/Browser-Settings. Das Eltern-Elements sowie das Zoomen (was wiederum eher für EM spricht) ebenso eine Rolle spielt. Ich selber nutze ja auch lieber relative Werte wie % oder EM. Nur spricht beim Media Querie nichts dagegen, wenn es lediglich um den Brakepoint geht.

Das soll heißen: Man darf sich ruhig bei den großen etwas abschauen, aber man darf nicht alles blind nachmachen, man darf sich auch mal trauen etwas anders (besser?) zu machen.

Möchte ich dick mit Edding unterstreichen. Ich arbeite zwar gerne mit Bootstrap. Finde jedoch nicht alles daran gut. Davon ab es auch schnell wie mit "Kanonen auf Spatzen schießen" daher kommt. Daher hier und da lediglich ein schlankes Grid (z.B. 960/996) nutze.

Liebe Grüße, Patrick

 

[Myhar]

Es gibt durch aus Situationen, in denen man bewusst nicht möchte, das Werte geändert werden. [...]Nur spricht beim Media Querie nichts dagegen, wenn es lediglich um den Brakepoint geht.

Verzeih wenn ich hier nachhake, aber hast du auch ein konkretes Beispiel wo es sinnvoll ist, auf em-Breakpoints zu verzichten?
Ich habe immer em verwendet und noch nie Probleme damit gehabt, wenn ich statt (Beispiel) 960px 60em schreibe.

 

[patrick_l]

Verzeih wenn ich hier nachhake, aber hast du auch ein konkretes Beispiel wo es sinnvoll ist, auf em-Breakpoints zu verzichten?

Danke das du nachhakst. Ich muss meine Aussage revidieren. Lediglich im FF und Opera gibt es (fast) keine Probleme beim Zoomfaktor und den Brakepoints. Habe jedoch Amazons Kindle und der gleichen ganz vergessen, dessen Standardwerte andere sind. Von daher EM wieder die Nase vorn.

Edit:
Jetzt weiß ich es wieder wie ich auf die Pixel gekommen bin. Jedoch nicht im Bezug auf die Brakepoints sonder auf die Auswirkungen bei dir Schrift/Textformatierung. Dort muss eigentlich immer das Eltern-Elements und dessen Werte berücksichtigt werden. Oder man nutzt gleich REM (root em > CSS3) statt EM. Da REM nicht wie EM vom Eltern.- sondern vom Root-Element (html bzw. body) ausgeht.

Ich weiß jetzt jedoch nicht, wie es bei REM in älteren Browsern ausschaut, in denen CSS3 noch nicht oder nur teilweise implementiert ist. Selbst wenn man mit modernizr Features nachrüstet. Müsste selber schauen ob REM dort enthalten ist. Ich für meinen Teil nutze eigentlich EM. Für HTML5 meist html5shim inkl. respond (wie in Bootstrap) nutze oder eben modernizr (wie im HTML5 Boilerplate).

Wer dennoch REM verwenden möchte, Px/16 = REM.

Nochmal Frau Edit:
Hier nochmal ein Link für das nutzen von REM statt EM inkl. Fallback für den IE8 und älter. Dort wären wir dann wieder bei Pixel, zumindest was den Fallback angeht. Eines zeigen meiner Meinung nach solch und andere Diskussionen immer wieder, das gerade Responsive Webdesign mit all seinen Techniken (Image Replacement, relative Werte zur Formatierung etc.), das ganze sehr komplex und umfangreich machen.

-

Liebe Grüße, Patrick

 

[noltehans]

Hi Patrick,

wofür respond und (Media Queries)-Fallback für den IE8 und älter.
Es gibt keine mobilen Geräte mit dem IE8.

 

[patrick_l]

wofür respond und (Media Queries)-Fallback für den IE8 und älter.
Es gibt keine mobilen Geräte mit dem IE8.

Meine Äußerung bezüglich IE8 bezieht sich auf die Verwendung von REM. Also nicht auf die Media Queries. Der Vollständigkeit halber erwähnt. das REM in älteren Browsern nicht läuft und daher der genannte Fallback.

Wie von mir geschrieben, REM lediglich für die Schriftformatierung. Sofern man vom Root und nicht vom Eltern-Element ausgehen will/möchte. Hat jetzt jedoch selbst nichts mit den Media Queries und der Verwendung von relativen (em) oder absoluten Werten (px) zutun.

Liebe Grüße, Patrick

 

[noltehans]

Tja, lesen müsste man können.
Ich hatte den Fallback natürlich auch gleich auf die Media Queries bezogen.

 

[msa1989]

Muss sagen dass ist ein sehr interessanter Thread geworden.
Werde mir das Theme em und rem mal demnächst näher anschauen und bin mal gespannt wie es dann bei der Verison 4.0 von Bootstrap umgesetzt wird.

 

[hdd_1]

Hier wurde viel geschrieben, aber nicht mehr als 2 Personen haben auf meine Frage ein Antwort/Vorschlag gegeben.

@CrazyLopp ...aber 320px braucht man doch für Smartphones oder? (zb. iPhone)..meiner Meinung sollten heutige Smartphones unterstütz werden, hingegen 240px wären die alte Geräte? Oder habe ich was verwechselt? (Bin davon ausgegangen: http://mattkersley.com/responsive/)

320 x 480 (iPhone)

 

[patrick_l]

hingegen 240px wären die alte Geräte? Oder habe ich was verwechselt?

Nochmal zum Verständnis, es werden keine Werte explizit für ein Device notiert.
Weder für Smartphone, Tablet oder Desktop-PC. Ob sie jetzt vom Baum gefallen sind oder durchs Fenster kommen.

/* =============================================================================
   Media Queries
   ==| Tablet (Portrait size to Base 996px) |=================================== */
@media only screen and (min-width: 48em) and (max-width: 62.188em) {}
/* ==| All Mobile Size |======================================================== */
@media only screen and (max-width: 47.938em) {}
/* ==| Tablet(Portrait) / Mobile(Landscape) |=================================== */
@media only screen and (min-width: 30em) and (max-width: 47.938em) {}
/* ==| Mobile (Portrait/Landscape) |============================================ */
@media only screen and (max-width: 29.938em) {}

Liebe Grüße, Patrick