Website erstellt - Was passiert bei "neuen" Auflösungen

[damomo3392]

Hallo, beschäftige mich noch nicht so lange mit HTML, CSS, PHP, aber habe mal eine Seite erstmal nur mit HTML und CSS erstellt. Soweit alles kein Problem. Die größe des HTML/Body-Tags habe ich relativ auf 100% gelegt, darin befindet sich jedoch ein Div-Container, wo sämtlicher Inhalt rein kommt.

Dieser Container hat ne feste Weite in Pixel, ebenso die Höhe. Margin habe ich via "0 auto" befehl geregelt.

Hoffe ihr kommt noch einiger Maßen mit. Von den Seitenverhältnissen bei kleineren Auflösungen stimmt alles - Was passiert aber, wenn es in Zukunft höhere Auflösungen gibt? Meinetwegen 3840x2060 - Ist dann alles auf der Seite "gestaucht", oder wie muss ich mir das Vorstellen? Vielleicht habe ich grade irgendwo ein Denkfehler?

 

[Daaron]

Alle Elemente mit fester Breite in Pixel behalten ihre feste Breite. Alle Elemente mit fester Höhe behalten ihre Höhe. Ein Element mit fester Breite und horizontaler Margin "auto" ist immer mittig.

Die Frage nach den Auflösungen ist aber insgesamt ne ganz komplexe Geschichte. Denk jetzt mal weniger an zukünftige endlos breite Auflösungen. Noch ist nicht einmal gesagt, ob sich beim PC viel ändern wird. Schließlich könnte man auf ner 4k-Auflösung nicht zocken, das packt keine Grafikkarte.
Denk lieber mal nach unten, an bestehende Technologie. Denk an Tablets und Smartphones. Wie wird deine Seite dargestellt, wenn du mit einem Ipad drauf gehst? Was passiert, wenn du es von Hoch- auf Querformat kippst?

Plane bei all deinen Layouts immer ein, wie sie sich verändern sollen, wenn der verfügbare Bildausschnitt deutlich kleiner ist. Auf eine 4k-Auflösung brauchst du hingegen gar nicht zu achten. Endlos breite Inhalte könnte niemand lesen, sie entsprechen nicht unseren Sehgewohnheiten. Es hat schon seinen Grund, warum die Content-Bereiche immer so grob 900-1100px breit sind.
Wie kriegst du all deine Inhalte auf die Seite, ohne dass ein iPhone-User im Hochformat auch noch horizontal scrollen oder zoomen muss?

Das Stichwort heißt übrigens CSS Media Queries.

 

[E.o.B]

Hallo,

benutze doch einfach mal absichtlich kleinere Werte für die DIVs als geplant, dann wirst Du sehen wie es wirkt und aussieht.

hf
E.o.B

 

[powerfx]

Seit einigen Versionen gibt es ein nützliches Tool zum Simulieren von verschiedenen Auflösungen direkt in Firefox (ohne Add-ons).

"Extras" -> "Web-Entwickler" -> "Bildschirmgrößen testen", bzw. Strg+Shift+M.

 

[Daaron]

Viel nützlicher ist die Variante im Chrome. Die kann nicht nur die Browsergröße simulieren, sondern auch direkt den User Agent.
F12 -> kleines Zahnrad ganz unten rechts in der Ecke -> Overrides