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

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:

Code:

---

#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?

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.

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...

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...

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?

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

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.

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