Hallo,

ich würde gerne mal über ein Problem beim Responsive Webdesign diskutieren (oder vielleicht auch eher philosophieren). Zumindest in meinen Augen ist es ein Problem. Aber da ich wirklich noch ganz grün auf dem Gebiet bin, vielleicht gibt es eine einfache Lösung, die ich übersehen habe. Folgende Ausgangsituation:

Ich habe eine Website mit einspaltigem Layout. Keine Sidebar, keine Banner an der Seite und es ist auch nichts dergleichen vorgesehen. Der Bildschirminhalt muss also irgendwie mit Text (und Rand) gefüllt werden. Damit die Zeilen nicht zu sehr in die Breite gehen, definiere für kleine Bildschirme gar keinen Rand, für größere etwas Rand und für sehr große entsprechend viel Rand. Außerdem kann ich noch, die Schriftgröße für große Bildschirmbreiten etwas anheben.

Das Problem (zumindest für mich):
Das geht alles nicht dynamisch. Wenn ich z. B. bei 600 Pixeln Breite einen Breakpoint habe

@media (min-device-width: 600px) {  
main { width: 85%; }  
}

Dann bekommt ein Device mit einer Breite von 599 Pixeln einen größeren Inhaltscontainer angezeigt als ein Device mit 600px. Der User merkt es natürlich nicht. Aber unter der Prämisse, dass ich für jede Bildschirmgröße die optimale Darstellung (dynamisch) definieren will, sind Breakpoints doch per se ineffizient. Legt Responsive Design nicht immer so viel Wert auf ein dynamisches Layout?

Mir fallen leider nur 2 unbefriedigende Möglichkeiten ein, das Problem zu umgehen:

1. Sehr viele Breakpoints festlegen um, wenn man so will etwas mehr Stetigkeit in die Funktion "device-width <-> Containerbreite" zu bringen. Wenn ich mich nicht irre, wird aber immer empfohlen, mit so wenig wie möglich Breakpoints zu arbeiten. Schätze mal um das CSS nicht zu sehr aufzublähen.

2. Per Javascript die Bildschirmbreite ermitteln und dann die Containerbreite (oder analog den Rand) als Funktion der Bildschirmbreite berechnen. Z.B.

Rand (in px) = (bildschirmbreite ^2) / 10000

Dann den Rand nachträglich im CSS einfügen. Diese Möglichkeit würde ich evtl sogar umsetzen, auch wenn ich den Einsatz von Javascript normalerweise immer eher als Notlösung sehe.

Ich befürchte, die einzige befriedigende Lösung für mein Problem wäre, wenn man in Style-Angaben mathematische Funktionen (wie unter 2.) benutzen könnte. Warum eigentlich nicht? Browser können doch rechnen und die Bilschirmgröße kennen sie auch...

Gibt es vielleicht noch einen anderen Weg, die Breakpoints zu umgehen?