am einfachsten ist es wohl, wenn du einfach allen elementen statt 'px' oder '%' werten einen 'vw' bzw 'vh' wert gibst. damit skalieren die elemente immer proportional zur größe des fensters (viewport), wobei vw für vievport-width und vh für viewport-height steht.
das ist wohl nicht die beste lösung, aber eine universallösung gibt es hier nicht. wenn der bildschirm kleiner/größer wird passt halt manches nichtmehr rauf oder wird unproportional zum rest.
am einfachsten ist es wohl, wenn du einfach allen elementen statt 'px' oder '%' werten einen 'vw' bzw 'vh' wert gibst. damit skalieren die elemente immer proportional zur größe des fensters (viewport), wobei vw für vievport-width und vh für viewport-height steht.
das ist wohl nicht die beste lösung, aber eine universallösung gibt es hier nicht. wenn der bildschirm kleiner/größer wird passt halt manches nichtmehr rauf oder wird unproportional zum rest.
Hey, danke für deine doch recht schnelle Antwort. Ich teste das ganze mal aus, weil sonst wirds halt doof für die User mit dem Smartphone.
Ich kenne das bloß von anderen Seite, dass es dort geregelt ist, bspw : diese Seite
edit:
Hier mal ein paar Bilder, wie es auf verschiedenen Zoomstufen ausschaut :
100%
Wie es ausschauen sollte :
kein gutes beispiel, die seite ist alles andere als responsive.
als beispiel für die von mir beschriebene technik kannst du dir hier das logo ansehen. du kannst zoomen wie du willst, das logo bleibt immer gleich groß und an der gleichen position.
problematisch wäre das allerdings wenn es ein button wäre, da wenn das fenster schmaler wird der button auch kleiner werden würde. in dem fallbeispiel könntest du dann eine min-width/height setzen.
das ist nur ein kleines beispiel, es gibt viele verschiedene wege wie du deine webseite responsive gestalten kannst.
kein gutes beispiel, die seite ist alles andere als responsive.
als beispiel für die von mir beschriebene technik kannst du dir hier das logo ansehen. du kannst zoomen wie du willst, das logo bleibt immer gleich groß und an der gleichen position.
problematisch wäre das allerdings wenn es ein button wäre, da wenn das fenster schmaler wird der button auch kleiner werden würde. in dem fallbeispiel könntest du dann eine min-width/height setzen.
das ist nur ein kleines beispiel, es gibt viele verschiedene wege wie du deine webseite responsive gestalten kannst.
Naja, ich habs scheinbar nicht richtig getestet gehabt oder muss nochmal dran pfeilen. Jedenfalls habe ich es nicht auf Anhieb geschafft, ein anderes Ergebnis zu erzielen.
Es geht mir auch wirklich nur darum, dass sich ALLES so wie es auf 100%-Scale ist, je nach anderen Stufen gleichzeitig minimiert, halt wie bei HabboW mit meinen Beispielen. Ich habe vor, genau dieses Ergebnis zu erzielen
ich seh schon, du vergibst frei heraus irgendwelche werte, kein wunder dass du bei einer anderen skalierung probleme bekommst.
versuch mal einfach alle elemente 'position: absolute' zu setzen und die werte einheitlich in pixeln zu vergeben. das sollte im ergebnis ungefähr so skalieren wie habbow.
ich seh schon, du vergibst frei heraus irgendwelche werte, kein wunder dass du bei einer anderen skalierung probleme bekommst.
versuch mal einfach alle elemente 'position: absolute' zu setzen und die werte einheitlich in pixeln zu vergeben. das sollte im ergebnis ungefähr so skalieren wie habbow.
Gut, ich setze mich mal dran. Danke für die bisherigen Hilfestellungen
Gut, ich setze mich mal dran. Danke für die bisherigen Hilfestellungen
Zur Not sende deinen gesamten Code mal auf Pastebin oder ähnlichen Plattformen. Mache dir das dann.
Zur Not sende deinen gesamten Code mal auf Pastebin oder ähnlichen Plattformen. Mache dir das dann.
Coole Sache! Ja, ich versuche mich erstmal selbst daran um es mir selbst auch einzuprägen und etwas für die Zukunft mitzunehmen.
Coole Sache! Ja, ich versuche mich erstmal selbst daran um es mir selbst auch einzuprägen und etwas für die Zukunft mitzunehmen.
Ja klar, versuch du erstmals. Sollst es ja auch selbst lernen und verstehen. Wenn du nicht weiter kommst, steht das Angebot!
https://wiki.selfhtml.org/wiki/CSS/Media_Queries
und statt px lieber vh verwenden
Weniger float benutzen und mit Prozenten arbeiten. Media Querie ist ein super Einstieg in die Handyoptimierung und macht auch viel Spaß. Ansonsten kann ich dir Frameworks wie materialize oder Bootstrap empfehlen. Sind auf dem ersten Blick ziemlich große Frameworks, sind aber simpler und unkomplizierter als man denkt. Ich persönliche arbeite nur noch mit materialize und kriege meine Handyoptimierungen in knapp einer Stunde vollständig hin!
ich seh schon, du vergibst frei heraus irgendwelche werte, kein wunder dass du bei einer anderen skalierung probleme bekommst.
versuch mal einfach alle elemente 'position: absolute' zu setzen und die werte einheitlich in pixeln zu vergeben. das sollte im ergebnis ungefähr so skalieren wie habbow.
Also, ich habe jetzt soweit alles auf ''vh'' abgeändert und die position auf absolute. Die Elemente verschieben sich auch nicht mehr so krass, aber dennoch ist es nicht ausbalanciert und ich bin mit meinem ''Anfängerverstand'' am Ende.
Mein resultat soll ja nur alles gleichmäßig verkleinern/vergößern, passt sich ja dann auch irgendwo für die Mobileuser an. Selbst wenn nicht, für die PC-User würds ausdienen
Mein resultat soll ja nur alles gleichmäßig verkleinern/vergößern
Kurz : Wie den Inhalt in seiner Position behalten trotz Zoomphasen?
das sind zwei paar schuhe. den 'vh/vw' ansatz nutzt du, wenn deine webseite trotz zoom gleich bleiben soll (zitat 2), den position 'absolute mit px werten'-ansatz nutzt du wenn es gleichmäßig verkleinern/vergrößern soll (zitat 1).
das sind zwei paar schuhe. den 'vh/vw' ansatz nutzt du, wenn deine webseite trotz zoom gleich bleiben soll (zitat 2), den position 'absolute mit px werten'-ansatz nutzt du wenn es gleichmäßig verkleinern/vergrößern soll (zitat 1).
Okay, soweit verstanden. Das ist nun auch noch verständlicher gemacht, danke dafür.
Allerdings : Kann man beides nicht kombinieren? Wenn ja wie? Weil ... sie sollen ja schon ihre Position beibehalten (siehe HabboW-Bilder) und gleichmäßig vergrößert/verkleinert werden (siehe ebenfalls HabboW-Bilder). Wie löst man das am besten?
Mir kommt es auch garnicht ganz auf die bessere Mobileversion an wie vielleicht erst geschrieben, weil sich das ja mit der oben genannten Frage lösen würde. Wenn ich mit nem Handy auf http://www.HabboW.de gehe, dann ist alles gut positioniert (halt einfach verkleinert) und trotzdem ist die Bedienung so wie sie sein sollte (ich hoffe man kann mein Ziel verstehen)
bei beiden vorgeschlagenen lösungen behalten die elemente ihre positionen, sofern sie konsequent umgesetzt sind.
beispiel: ein absolutes element hat die werte 'left: 50px; width: 60px;' , daneben ist ein element mit 'left: 120px';width: 60px;'. nun ist das linke element immer 50px vom linken rand entfernt, und 60px breit. das rechte element ist immer 120px vom linken rand entfernt und ebenfalls 60px breit -> das rechte element ist 10px vom linken element entfernt.
nun kannst du zoomen wie du willst, die elemente und ihre abstände bleiben immer gleich und sie behalten ihre position, sie werden halt logischerweise durch den zoom kleiner-größer.
du solltest vielleicht mal mit einem leeren dokument anfangen und bei jedem neu gesetzten element rein-/rauszoomen, übung macht den meister.
bei beiden vorgeschlagenen lösungen behalten die elemente ihre positionen, sofern sie konsequent umgesetzt sind.
Spoiler anzeigen
beispiel: ein absolutes element hat die werte 'left: 50px; width: 60px;' , daneben ist ein element mit 'left: 120px';width: 60px;'. nun ist das linke element immer 50px vom linken rand entfernt, und 60px breit. das rechte element ist immer 120px vom linken rand entfernt und ebenfalls 60px breit -> das rechte element ist 10px vom linken element entfernt.
nun kannst du zoomen wie du willst, die elemente und ihre abstände bleiben immer gleich und sie behalten ihre position, sie werden halt logischerweise durch den zoom kleiner-größer.
du solltest vielleicht mal mit einem leeren dokument anfangen und bei jedem neu gesetzten element rein-/rauszoomen, übung macht den meister.
Cooles Beispiel, gefällt mir und ist aufschließend. Ich lerne derzeit noch, dies alles aufzufassen und umzusetzen, dachte sowas umzucoden ist nicht die Schwierigkeit weil es an sich nur das Design ist. Aber bei diesem Punkt wusste ich mir halt nicht zu helfen, ich versuche das ganze gleich mal.
edit: Geht das auch mir margin-Werten?
edit2: Okay, habs geschnallt, endlich! Ist zwar aufwändig, aber es soll ja auch etwas werden. Muss den Dreh noch herausbekommen, habs jetzt für links, unten, Höhe und Breite festgelegt, jetzt noch die jeweiligen Gegenwerte finden etc. // Danke für alle Antworten!
edit3: Okay, falscher Gedankenansatz. Ich bekomme es zwar hin, alles für unten links zu optimieren, mit dem Gegenteil allerdings nicht (sodass es mittig & gleich skaliert). Falls es noch Ideen gibt, nehme ich diese gerne entgegen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
