# responsive Design



## SpecialFighter (8. Mai 2015)

Guten Morgen alle zusammen,

ich möchte gerne meine jetztige Webseite Smartphone tauglich gestaltet und wollte Mal fragen, wie man dies am besten macht.

Habe mich schon etwas schlau gemacht und gelesen, dass man bei CSS mit @media arbeiten kann:

```
@media only screen and (min-width: 320px) and (max-width: 320px) and (orientation:portrait) {
```

muss ich das dann für jede Smartphone Auflösung so machen? 
Das wäre ja richtig viel Arbeit oO


----------



## SpiceLab (8. Mai 2015)

Falls das CSS-Framework Bootstrap, das dir die Arbeit abnehmen würde, für dich nicht in Frage kommt, findest du z.B. hier eine Auflistung der gängigen Media Queries, da es neben den Smartphones auch Tablets gibt: http://code-tricks.com/css-media-queries-for-common-devices/


----------



## SpecialFighter (8. Mai 2015)

wie funktioniert das system von bootstrap?


----------



## SpiceLab (8. Mai 2015)

http://holdirbootstrap.de/los-gehts/


----------



## SpiceLab (8. Mai 2015)

Sowie http://holdirbootstrap.de/css/ für Details


----------



## SpecialFighter (11. Mai 2015)

habe es jetzt doch manuell über diese Angaben gemacht: http://code-tricks.com/css-media-queries-for-common-devices/
Habe alle Smartphones im Portrait Modus nicht abgedeckt.

Allerdings habe ich ne kleine Frage beüglich Landscape.
Dort ist folgende Angabe vorgegeben:


```
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
```

Das würde doch auch bedeutet, dass PCs in diese Kategorie mit rein fallen, denn die haben ja locker eine min-widht von 321px
Oder seh ich das falsch?


----------



## SpiceLab (11. Mai 2015)

SpecialFighter hat gesagt.:


> Das würde doch auch bedeutet, dass PCs in diese Kategorie mit rein fallen, denn die haben ja locker eine min-widht von 321px
> Oder seh ich das falsch?


Nein. Aber bedenke, dass so auch keine spezifische Unterscheidung (Anpassung) zwischen den unterschiedlichen Geräten vorgenommen wird.


----------



## SpecialFighter (11. Mai 2015)

wieso nein?
natürlich würde der pc darunter fallen - habe es eben Mal getestet - und die PCs schlagen darauf an,
ist ja iwie logisch - jeder PC hat ne min-width von 321px.

wie müsste ich den code den richtig anpassen?


----------



## SpiceLab (11. Mai 2015)

"Nein" heißt auf deine gestellte Frage "Das siehst du nicht falsch"


----------



## SpecialFighter (11. Mai 2015)

ahhhh  
und wie wäre es dann richtig?


----------



## SpiceLab (11. Mai 2015)

Die genannte Seite zeigt doch, wie die Unterscheidungen mittels *min-width* u. *max-width* definiert werden.


----------



## SpecialFighter (11. Mai 2015)

schon klar, nur was nimmt man am besten für einen max-width für landscape smartphone?


----------



## SpiceLab (11. Mai 2015)

Steht dort alles...

Entweder

```
/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
```
oder

```
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
```


----------



## SpecialFighter (11. Mai 2015)

ich würde ja gerne nur die Geräte im Landscape anschprechen:

und hiermit spreche ich doch auch PCs an, wie wir eben festgestellt haben:
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}


----------



## SpiceLab (11. Mai 2015)

SpecialFighter hat gesagt.:


> ich würde ja gerne nur die Geräte im Landscape anschprechen


Und was soll bei den mobilen Geräten (Smartphone, Tablet) im Hochformat (portrait) geschehen?


SpecialFighter hat gesagt.:


> und hiermit spreche ich doch auch PCs an, wie wir eben festgestellt haben:
> /* All Smartphones in landscape ----------- */
> @media only screen
> and (min-width : 321px) {
> ...


*max-device-width* spricht PCs nicht an. 

Gleiches gilt für die Kombination *min-device-width *u.* max-device-width*.


----------



## SpecialFighter (11. Mai 2015)

so ganz warm werde ich damit noch nicht:


```
@media only screen and (min-device-width:320px) and (max-device-width:480px){... }
```

Die Angaben sind nicht ganz aktuell:
Ein iPhone 6 z.B. hat ja schon im landcape ne width von 736
Habe also den max wert angepasst, aber iphone 6 plus reagiert darauf nicht


----------



## SpiceLab (11. Mai 2015)

So wirst du auch nicht alle unterschiedlichen Größen der einzelnen Ausgabemedien erschlagen können - eigentlich logisch!

Aus diesem Grund gibt es schließlich auch differenzierte Media Queries!

Nur mal zum Bedenken: Mein "Samsung Galaxy Note 3" kommt mit 360px*640px daher.


----------



## SpecialFighter (11. Mai 2015)

ich möchte auch nicht unterschieldiche Ausgaben machen.
Ich möchte EIN Design für alle Smartphones anbieten.

aber warum reagiert das iphone 6 plus auf die o.g. Codezeile nicht?


----------



## SpiceLab (11. Mai 2015)

"Alle" Smartphones besitzen aber unterschiedliche Bildschirmauflösungen im Hoch- u. Querformat, die es zu berücksichtigen gilt.

Wenn dein Media Query wie zuletzt gezeigt lautet, spielt sich der Viewport zwischen "320px" u. "480px" ab, und die "736px" fallen logischerweise durch.


----------



## SpecialFighter (11. Mai 2015)

hatte doch geschrieben, dass ich es angpasst habe:


```
media only screen and (min-device-width:320px) and (max-device-width:736px){... }
```


----------



## SpiceLab (11. Mai 2015)

Eine korrekte Dimensionsangabe vorausgesetzt, bin ich mangels iPhone nicht imstande, die Ursache für das Fehlverhalten analysieren/benennen zu können, aber unsere Diskussionsgrundlage zeigt da was Spezielles für iPhone 4. Vielleicht trifft es auch auf iPhone 6 zu:


```
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}
```

durchgestrichen -> obsolet. Grund siehe nachfolgenden Post.


----------



## SpiceLab (11. Mai 2015)

SpecialFighter hat gesagt.:


> Ein iPhone 6 z.B. hat ja schon im landcape ne width von 736
> Habe also den max wert angepasst, aber iphone 6 plus reagiert darauf nicht





SpiceLab hat gesagt.:


> Eine korrekte Dimensionsangabe vorausgesetzt


Auszug Apple-Store:


			
				"Display" hat gesagt.:
			
		

> *iPhone 6:*
> 4,7" Multi-Touch Widescreendisplay mit LED-Hintergrundbeleuchtung und IPS-Technologie (11,93 cm Diagonale)
> *1334 x 750 Pixel* bei 326 ppi
> 
> ...


----------



## Nugorra (18. Mai 2015)

SpecialFighter hat gesagt.:


> Allerdings habe ich ne kleine Frage beüglich Landscape.
> Dort ist folgende Angabe vorgegeben:
> 
> 
> ...



So siehst du das richtig,
die Angabe wie sie da steht ist z.B. geeignet für eine Mobile First Seite.
Also für eine Seite deren Grund CSS nur die Mobile Darstellung hat 
und in der mit höherer Breite weiter Sachen hinzukommen bzw. angepasst werden.
(So hast du dann Media Querys die auf dem vorherigen aufbauen) 
bsp. nächster break könnte sein  

```
@media only screen and (min-device-width : 768px)
{
/* YOUR STYLE GOES HERE */
}
```


----------



## jeipack (27. Mai 2015)

Damit die media querys für iPhones (und allgemein Smartphones) richtig funktionieren brauchst du einen Metatag:

```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
(Im head einfügen)

So hat ein iPhone 6 dann ein width von 375px (und ein bisschen mehr wenn es ein iPhone 6 Plus ist).

Danach hat man meistens 3 verschiedene Querys. (jenachdem ob du mobile first oder desktop first gehst).
Im Fall von desktop first hast du zB:


```
/* allgemein */
.content {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

/*sobalds unter 1000px geht willst du den content auf width 100% schalten */
/* zB für tablets */
@media (max-width:1000px) {
.content {
width: 100%;
}
}
/* wenns noch kleiner wird, willst du eventuell bestimmte Elemente verstecken, oder die Navigation anders stylen */
@media (max-width:500px) {
.dontShowOnMobile {
display: none;
}
}
```
(Nur schnell hingeschrieben um ein Beispiel zu geben)

Bei diesem Beispiel gehst du also von der Desktopversion aus (die du ja im Moment hast) und überschreibst die Styles für kleinere Auflösungen.

Jedes einzelne Smartphone (resp. jede einzelne Auflösung) anzusprechen ist ein Ding der Unmöglichkeit (Du könntest es machen, aber bis du fertig bist sind wieder 3 neue Geräte drausen mit geringfügig anderen Auflösungen). Deshalb nimm einfach einen Breakpoint (in meinem Beispiel 1000px und 500px) und arbeite da vor allem mit Prozentangaben für Width.


Das wären so die Basics.


----------

