HTML und CSS webseite soll auf jedem Bildschirm gleich aussehen?
Hallo, ich bin dabei eine Webseite zu programmieren und habe meine webeseite nun auf einem Laptop offen. Nun würde ich aber gerne wissen wie der Code dafür lautete das meine Internetseite auf meinem 12 Zoll laptop genau so aussieht wie auf meinem 24 zoll Bildschirm. auf meinem Laptop ist alles zusammengedrückt. Im internet finde ich dazu leider nichts.
3 Antworten
Damit deine Website auf allen Endgeräten gut aussieht musst du die Seite "Responsive" machen.
Das bedeutet du musst z.b. einem Div-Container keine breite von 200px geben, sondern eine gewisse Prozent Angabe.
Es ist auch Möglich in der CSS Datei die Media Query Technik zu verwenden, dort kannst du bestimmen wie sich der Style deiner Elemente bei unterschiedlichen Bildschirm breiten verändern soll.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Mit solchen Methoden werden auch gezielt Designs für Smartphones und Tablets erstellt.
Es ist eigentlich ein sehr spannendes aber auch Mühsames Thema.
Sollte dir das ganze zu viel Arbeit sein gibt es aber auch viele gratis Baukästen die ein Responsive Design anbieten um es dir einfacher zu machen.
https://www.zeta-producer.com/de/website-erstellen.html
Hoffe ich konnte dir helfen :)
Verabschiede dich vom Traum, dass deine Webseite auf allen Geräten exakt gleich aussehen soll, denn es gibt viele Faktoren, die das nicht ermöglichen.
Zum einen die Browser. Zwar gibt es Prefixes, wodurch vieles auf verschiedenen Browsern funktioniert, aber du wirst früher oder später an den Punkt gelangen, wo deine Umsetzung z.B. nicht auf IE8, Opera Mini oder sonst was richtig funktioniert. Hinzu kommt, dass jeder Browser anders interpretiert, wodurch es zu minimalen Abweichungen kommen kann.
Der zweite Faktor sind die Gerätegrößen. Es macht keinen Sinn, deine Desktopseite genauso auf dem Handy abbilden zu lassen und auch zwischen Desktops mit 1200px aufwärts und einem Tablet sollten gestalterische Unterschiede bestehen. So hast du z.B. auf Touchgeräten keinen Hover, am PC keinen Doubletap, usw. Auch dein Grid wird sich unterscheiden, weil z.B. die Anordnung von Galeriebildern auf dem Handy, Tablet und PC jeweils anders sein. Und zu guter letzt wirst du Grenzen setzen müssen. Selbst wenn du deine Seite gerne immer auf 100% skaliert haben möchtest, irgendwo musst du ein Maximum setzen und seien es 4000px Breite. Und solltest du deine Webseite bis z.B. 4000px machen musst du dir überlegen, welche Geräte das dann sind - eher Fernseher. Und die Bedienung einer Webseite über einen Fernseher funktioniert auch nochmal anders als auf dem Handy oder PC, weshalb auch de Webseite entsprechend anders auszusehen hat.
Technisch jedenfalls musst du dich mal nach css media queries erkundigen.
Hallo
Nur weil ich schon viele Fragen erlebt habe:
Falls du
"soll auf jedem Bildschirm gleich aussehen"
wörtlich meinst: Das funktioniert praktisch nicht.
Das die Anordnung der Inhalte sich verschiedenen Fenstergrößen anpasst ist vollkommen normal und sinnvoll. Dieses Verhalten kannst und solltest du nur etwas anpassen, so dass deine Besucher die Inhalte problemlos lesen können und sich auf der Seite zurechtfinden.
Gruss
MrMurphy