Frage von CleYT, 66

NOTFALL Wie optimiere ich meine Webseite so dass sie für jeden Bildschirm in der perfekten Größe angezeigt wird?

Heyy, es ist so zu sagen ein Notfall!! Ich habe heute meine erste Webseite online gestellt doch da macht sich das erste Problem breit, ich habe es mir zwar schon früher gedacht aber jz ist es mir echt sehr wichtig!!! Wie kann ich die Webseite so machen dass sie auch bei Usern mit einem nur halb so großem Bildschirm, also nicht full HD normal anzeigen lassen?

Bitte um Hilfe an die Gutefrage-Community!!!! :)

Lg, Cle

Antwort
von triopasi, 32

Du darfst für Layout keine absoluten angaben benutzen! Die Positionierung darf nur über relative Angaben geschehen, zB % statt px!

Kommentar von CleYT ,

Ja das wird problematisc

Kommentar von triopasi ,

Wieso? Padding und margin usw kannst du schon noch in px angeben, aber um zB was zu zentrieren kannst du definitiv keine Pixelangaben nutzen oder für Breiten von Content-Containern usw..

Kommentar von CleYT ,

also wenn ich sage left so und so viel px muss ich da ne prozentanzahl machen sonst funktionierts nicht?

Kommentar von triopasi ,

Statt: "width: 1200px" sagst du halt zB "width 90%".

Antwort
von PeterKremsner, 36

Entweder durch media Querys oder du verwendest ein Responsive CSS Framework wie zB Bootstrap.

Wenn es nur um die Größe von zB Bildern geht kannst du diese auch mit max-width: 100% auf den Container Skalieren:

http://stackoverflow.com/questions/15295697/make-an-image-to-fit-its-parent-dime...

Kommentar von CleYT ,

Das hört sich sehr gut an, ich versuchs mal, weis nur nicht was media querys sind...

Kommentar von PeterKremsner ,

Media Querys sind teil von CSS und erlauben eigene CSS Richtlinien nach Browserfenstergröße.

http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Kommentar von CleYT ,

http://www.piratenschnack.com/ Die Menü-Leiste verbiegt sich nach wievor wie wild auch nach den Media_Queries die ich im head eingefügt habe :(

Kommentar von PeterKremsner ,

Mach die Menüleiste auf 100% des Body, also über die ganze Seite, ab einer Gewissen Auflösung musst du wohl oder übel die Menüleiste verbergen in etwa so:

https://getbootstrap.com/examples/navbar/

Weil es hier schon um größere Änderung geht und du dich dafür auch mit Javascript befassen müsstest würde ich dir zu einem Framework raten.

Für Bootstrap solltest du die SASS Version verwenden.

Damit du das auch selbst kompilieren kannst, müsstest du Ruby und das Compass Gem installieren. Dann kannst du die scss Dateien über das Compass Framework in CSS Dateien kompilieren.

Du kannst dir Bootstrap auch fertig kompiliert runterladen, allerdings kannst du dann die Farbe der Menüleiste nicht ändern.

http://getbootstrap.com/

Natürlich kannst du die Menü Leiste auch mit Javascript und Jquery umbauen, je nachdem was dir lieber ist.

Der Vorteil bei Bootstrap ist eben, dass es sehr viel bereits vorgefertigt gibt, Nachteil du musst es lernen und dich etwas mit SASS auseinandersetzen und du die Webseite umschreiben musst.

Vorteil der Javascript Variante ist, wenn du Javascript kannst, kannst du das vielleicht schneller Implementieren als Bootstrap. Nachteil, du musst alle Komponenten welche du vielleicht von Bootstrap verwenden könntest, per Hand nachbauen.

Antwort
von fr00d, 5

Hi, auf SelfHtml gibt's ne super Seite dafür, die erklärt was die Grundlagen sind und schon ein paar Einblicke in die Technik gibt: https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign

Danach würde ich dir http://www.w3schools.com/ empfehlen. Viele coole Anleitungen und super Beispiele, um das zu lernen.

Wenn du es nicht komplett lernen willst, weiche auf ein bestehendes Framework oder Theme aus und pflege dann nur noch deine Inhalte ein.

Antwort
von mindlessbreit, 31

ist zwar warscheinlich net so probat, aber indem du die größenangaben in % machst, als einfachste möglichkeit

Kommentar von CleYT ,

Es würde Tage dauern bis ich alles in Prozent habe... Die Webseite hat viel Inhalt

Kommentar von mindlessbreit ,

hast du denn keine css files? über die du den style regulierst?

also soweit ich weiß funktioniert das nur, wenn du die größen in % oder EM angibst, wobei ich mir net sicher bin, ob EM für unterschiedliche bildschirmgrößen geeignet ist

Kommentar von CleYT ,

Danke ich denke ich habe jetzt einen Weg gefunden mit Prozenten

Kommentar von mindlessbreit ,

gl

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten