CSS Media Queries

Cool Master · 24. März 2015

Moin,

ich wollte mal eure Meinung zu Media Queries und Responsive Design hören.

aktuell bin ich an einer Seite die umgebaut wird, nichts großartiges oder aufweniges, es soll einfach in HTML5 umgesetzt werden und eben ein Responsive Design her auf Basis des alten Layouts. Wie viele Media Queries macht ihr und vor allem bei welcher Größe?

Ich bin kein Fan von "auf Gerät X optimieren" also spare ich mir den Krempel mit iPhone und iPad Retina/Non Retina. Ich möchte einfach auf Smartphone, Tablet so wie Desktop "Klein", "Normal" und "Groß" optimieren. Für mich wären es also folgende Queries:

HTML:

@media only screen and (min-width:0em) and (max-width:39.9375em) {/* Smartphone bis 639px */}
@media only screen and (min-width:40em) and (max-width:64em) {/* Tablet bis 1024px */}
@media only screen and (min-width:64.0625em) and (max-width:80em) {/* Desktop klein bis 1280px */}
@media only screen and (min-width:80.0625em) and (max-width:120em) {/* Desktop normal bis 1920px */}
@media only screen and (min-width:120.0625em) and (max-width:160em) {/* Desktop groß bis 2560px */}

Kann man das so nehmen oder würdet Ihr sagen das geht besser/anders?

Tobey187 · 24. März 2015

Das kann man überhaupt nicht so allgemein sagen. Das ist von Fall zu Fall unterschiedlich und kommt vorallem auf den Content an.

Cool Master · 24. März 2015

Hmmm.

Also Layout sieht in etwa so aus:

Header: 3 Logos links, Suche rechts
Navigation
Content: 2 Spalten, links Content und rechts mini Infos in einer Box (https://jqueryui.com/tabs/)
Footer

Daaron · 24. März 2015

Cool Master schrieb:
Wie viele Media Queries macht ihr und vor allem bei welcher Größe?

So viele, wie nötig. Hier gibts keine generelle Aussage. Es gibt ja 2 Herangehensweisen, Mobile First oder Desktop First, wobei ich MF bevorzuge. Du machst erst einmal alles für dein "First"-Device hübsch, und dann vergrößerst/verkleinerst du den Viewport, bis irgendwas kacke aussieht oder nicht mehr gut bedienbar sit. Da hast du deinen nächsten Break Point

Sowas ist ziemlicher Murks.
1.) 1 File für alles, nicht mehrere Files. Das kostet derb Ladezeit (zumindest ohne SPDY bzw. HTTP/2)
2.) kein min-max - Zeugs, sondern entweder nur min oder nur max, und dann additiv auf eine Basis aufbauen. Manchmal macht min-max zwar Sinn, aber das ist eher Ausnahme als Regel

DHundt · 24. März 2015

Ich schließe mich den anderen Wortmeldungen an:
Fang z.B. bei 320px (Smartphone) an und zieh den Viewport auf.
Wenn das 1-spaltige Layout ins 2-/3-/usw. spaltige übergeht, kommt schon stark auf deine Elemente an.

Vererbung/Überschreiben lässt sich z.B. gut mit SASS/SCSS lösen.

Cool Master · 24. März 2015

Daaron schrieb:
So viele, wie nötig. Hier gibts keine generelle Aussage. Es gibt ja 2 Herangehensweisen, Mobile First oder Desktop First, wobei ich MF bevorzuge. Du machst erst einmal alles für dein "First"-Device hübsch, und dann vergrößerst/verkleinerst du den Viewport, bis irgendwas kacke aussieht oder nicht mehr gut bedienbar sit. Da hast du deinen nächsten Break Point

Ok. Wie gesagt da ich auf Retina/Non Retina verzichte wäre Mobile bis 639px bzw. 640px oder?

Daaron schrieb:
1.) 1 File für alles, nicht mehrere Files. Das kostet derb Ladezeit (zumindest ohne SPDY bzw. HTTP/2)

Habe ich. Alles in einer CSS Datei drin. Macht es Sinn diese später zu minimieren ergo alles in eine Zeile?

Daaron schrieb:
2.) kein min-max - Zeugs, sondern entweder nur min oder nur max, und dann additiv auf eine Basis aufbauen. Manchmal macht min-max zwar Sinn, aber das ist eher Ausnahme als Regel

Ok. Was wäre so eine Ausnahme?

Daaron · 24. März 2015

Cool Master schrieb:
Ok. Wie gesagt da ich auf Retina/Non Retina verzichte wäre Mobile bis 639px bzw. 640px oder?

Nö. Denk mal an ein horizontales Tablet, z.B. n großes Galaxy....

Habe ich. Alles in einer CSS Datei drin. Macht es Sinn diese später zu minimieren ergo alles in eine Zeile?

Nicht viel. CSS wird, von anständigen Servern, eh erst einmal durch gzip geschickt.

Ok. Was wäre so eine Ausnahme?

z.B. wenn du dutzende oder hunderte Regeln explizit zurücksetzen müsstest.

Cool Master · 24. März 2015

Daaron schrieb:
Nö. Denk mal an ein horizontales Tablet, z.B. n großes Galaxy....

Wollte ich eigentlich per:

Code:

(orientation: landscape)
(orientation: portrait)

lösen.

Oder sollte man das nicht machen?

Daaron · 24. März 2015

Nö, kann man schon, wenn es die gesamte Struktur nicht noch weiter verkompliziert.
Ein Telefon ist ja z.B. im Landscape immer noch schmaler als ein Tablet im Portrait.

Midnight Sun · 24. März 2015

Mobile (also auch ein kleines Tablet) wäre bei mir bis max. 600px, alles was danach kommst wäre Desktop.
Generell muss es zum Content passen und gut zu sehen/lesen sein.

Ich würde mit Mobile First und 240px anfangen.

Daaron · 24. März 2015

Dragon Sun schrieb:
Mobile (also auch ein kleines Tablet) wäre bei mir bis max. 600px, alles was danach kommst wäre Desktop.

Tja, blöd nur, dass z.B. n iPad4 sich als "1024x768" anmeldet. Galaxy Tabs sind sogar noch größer... und trotzdem ist nichts davon Desktop.
Du musst IMMER fließend auf JEDE mögliche Auflösung reagieren.

Viel wichtiger (und problematischer) ist die Touch-Erkennung. Dafür gibts keinerlei standardisierte Schnittstelle. Blöd nur, dass du bei Touch/No-Touch eben teilweise große Layout- und Workflow-Unterschiede hast. Einfachstes Beispiel ist da ne Suckerfish-Navigation.

Ich würde mit Mobile First und 240px anfangen.

Wenns der Content her gibt, was selten ist... aber welche Device ist schon so klein? Selbst wirklich schlange Phones wie das LG Optimus sind immerhin 320px breit.

Midnight Sun · 24. März 2015

240px

Da sollte 320px stehen

1024x? ist doch größer als 600px und wenn ich für/bei 600px und 767px ein Media Querie habe, muss ich, so fern es vom Content her passt nichts mehr extra anpassen.
Ob dann das iPad mit 1024px daher kommt oder nur 800px breite hat, ist doch dann relativ wurscht!?

Smartass · 24. März 2015

Aufgrund Deiner Layoutbeschreibung (#3) würd ich das prinzipiell so angehn:

Code:

header, nav {
max-width:1200px; min-width:320px}

footer {
max-width:100%; min-width:320px}

@media only screen and (max-width:1024px) {
/* Styles */}
@media only screen and (max-width:1024px) and (orientation:portrait) {
/* Styles */}
@media only screen and (max-width:480px) {
/* Styles */}

Daaron · 24. März 2015

Na ja, nur weil etwas so groß ist wie ein Desktop, verhält es sich noch nicht genauso. Denk nur an Convertible-Notebooks, wo du nicht einmal erraten kannst, obs nun Touch oder Maus ist.

Smartass · 24. März 2015

#14 Daaron

3-Col-Beispiel mit in #13 beschriebenen Media-Queries: Screenshot und im Fiddle-Fullscreen

@ others - einfach Browserfenster minimieren ;-)

[die unnötigen Scrollleisten sind fiddle-bedingt]

thecain · 25. März 2015

Das schwierige sind nicht die Spalten... Eher Fragen wie,

wann zeige ich die"mobile" Navigation, wann die "Desktop" Navi

Smartass · 25. März 2015

Stell Dir einfach vor, auf die in Beitrag #15 verwiesene Fiddleseite wäre eine Navigation ... und dann auf der Seite (oben rechts) per "Edit in JSFiddle" ein bisschen experimentieren ... vielleicht x

Code:

@media only screen and (max-width:480px) {
#content{height:1750px}

in

Code:

@media only screen and (max-width:480px) {
#content{height:1750px; background:silver}

abändern? "Run" klicken und das Fenster wieder minimieren/maximieren ... ich denke dies dürfte Deine Frage, -wie ich sie verstanden habe-, also das Du annimmst, man würde zwei Navigation benötigen, beantworten.

Cool Master · 25. März 2015

Ich nutze den FF zum Entwickeln gibt es da eine Möglichkeit die Rotation zu simulieren? Bzw. wie macht ihr es bzgl. Portrait/Landscape?

ice-breaker · 25. März 2015

Dann überleg dir mal lieber den Chrome auszuprobieren, ist für responsive design Entwicklung den anderen Browsern einfach Meilen überlegen.

Foochan · 25. März 2015

Cool Master schrieb:
Ich nutze den FF zum Entwickeln gibt es da eine Möglichkeit die Rotation zu simulieren? Bzw. wie macht ihr es bzgl. Portrait/Landscape?

Hab hierfür bislang den "Responsive Design View" (Ctrl + Shift + M) verwendet. Siehe auch: https://developer.mozilla.org/de/docs/Tools/bildschirmgroessen-testen

CSS Media Queries

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Fleet Admiral

Ensign

Fleet Admiral

Fleet Admiral

Fleet Admiral

Fleet Admiral

Commander

Fleet Admiral

Commander

Smartass

Gast

Fleet Admiral

Smartass

Gast

Ensign

Smartass

Gast

Fleet Admiral

Commodore

Ensign

Ähnliche Themen