Porportionales Responsive Design

Fullscreen Webdesign & Responsive kommen bei all unseren Webseiten zum Einsatz. Wieviel Zeit man in die Optimierung für einzelne Devices und deren Auflösungen investiert, ist unter anderem auch eine Frage des Budget. Man kann standartmässig Desktop und Mobile definieren, alle Grössen dazwischen passen sich dann im Bootstrap-Grid automatisch und spezifisch an, Optimiert sind diese Layouts dann aber noch keineswegs wenn z.b. Max-Width zum Einsatz kommt. Man sollte dort die Seiten-Ränder im Browserfenster beachten. Wenn man ein Layout oder die Typografie auf die gängigen Zwischen-Auflösungen optimiert, muss man diese auch Proportional so anpassen, damit in verschiedenen Viewports z.b. trotzdem immer die gleichen Elemente sichtbar sind, falls dies machbar ist. Es sollte nicht alles einfach 100% Weite ausnutzen, sobald es kleiner wird, man kann auch hier mehr Feinschliff in den Zwischenstufen anwenden.

Bootstrap-basiert am einfachsten mal mit den Container-Klassen:

/*   Desktop 1920 HD */
.container{
width: 100%;
max-width: 1400px;
}

/*   Laptop  1380*/
@media only screen and (max-width: 1399px) {
.container{
max-width: 1210px;
}
}

/*   Tablet Quer */
@media only screen and (max-width: 1190px) {
.container{
max-width: 940px;
}
}