Grundlegende Fragen zu Responsive-Webdesign mit ausschließlichen %-Angaben

[KloBoBBerLe]

Liebe Leser,

angenommen, ich möchte eine komplette Contao-Website ausschließlich mit %-Angaben anstelle von px gestalten (möglichst responsive eben) - wo bestimmte ich dann die Seitenbreite & Co.?

Beispiel: Der #wrapper soll 60% der Bildschirmbreite einnehmen und zentriert sein.

Darf ich dann einfach schreiben:

#wrapper {
	margin:0 auto;
	width:60%;
	}

Funktionieren tut das natürlich - aber ist es auch korrekt deklariert? Oder muss ich eher prozentuale margins vom Bildschirmrand angeben anstelle der eigentlichen #wrapper-Breite?
Die Breiten von #main, #left und #right werden prozentual dann wohl vom wrapper abgetragen, oder?

Herzlichen Dank!

Viele Grüße
KloBoBBerLe

PS: Wären 60% #wrapper-Breite ein realer und angenehmer Wert?

[andreasisaak]

Durch % Angaben wird eine Seite nicht responsive. Du solltest eher min-width und max-width nutzen und einige Breakpoints definieren wo das Design dann den nächsten Schritt macht und umbricht.

[KloBoBBerLe]

Ja stimmt, das macht Sinn!

min-width und max-width werden ja dann aber dennoch in % angegeben.

Doch worauf beziehen sich die Prozentangaben denn?
Auf die Breite des #wrappers oder auf die Breite des Bildschirms?

Ich merke gerade, dass Prozentangaben beim Designen mehr als hinderlich sind...
Und der Holy-Grail funktioniert ebenfalls nur mit em-Angaben, welche allerdings nicht wirklich die Charaktereigenschaften von Prozentbemaßungen besitzen...

[andreasisaak]

Nein du kannst min- und max-width auch mit px-Angaben nutzen. Ich nutze nie em oder % und meine Layouts sind flexibel, responsive und mobile-tauglich. Schau dir einfach mal http://now.metamodel.me/en/home an...

[KloBoBBerLe]

Besten Dank!

Okay, angenommen ich nutze min-width und max-width mit Pixelangaben:

Wird dann die User-abhängige IST-Pixel-Abmessung (die sich folglich in diesem Bereich bewegt) an seine jeweilige Viewportgröße angepasst?

Beispiel 1: Viewport hat 1024 x 768px => Soll-Abmessung des Elements = min-width-Wert
Beispiel 2: Viewport hat 2560 x 1600 => Soll-Abmessung des Elements = max-width-Wert

Wo muss ich festlegen, welcher min-width und max-width-Wert bei der jeweiligen Viewport-Grenzauflösung gilt? Wird das ebenfalls im Media-Query hinterlegt?

[CeeKay]

Schau dir trotzdem mal media-queries in em an, das hat gewisse Vorzüge.

[andreasisaak]

Was haben die für Vorteile? Es ist doch total egal ob px oder em im MediaQuery, hauptsache der Breakpoint passt. Wäre super wenn man die Vorzüge kurz auflisten könnte.

[CeeKay]

Was gefällt dir denn an der Erklärung in dem Artikel nicht?