responsive Design

[SpecialFighter]

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]

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]

wie funktioniert das system von bootstrap?

 

[SpiceLab]

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

 

[SpiceLab]

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

 

[SpecialFighter]

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]

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]

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]

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

 

[SpecialFighter]

ahhhh
und wie wäre es dann richtig?