MyBB.de Forum
Button an Bildschirmbreite anpassen - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Button an Bildschirmbreite anpassen (/thread-36849.html)



Button an Bildschirmbreite anpassen - falcao1010 - 23.11.2019

Hallo,

ich habe in meinem Forum kommunalforum.de einen Button installiert, der immer im Vordergrund steht (Link zum newthread). Das klappt auch gut.

Allerdings gefällt mir nicht, dass der Button in der Desktop- und mobilen Ansicht gleich groß ist (Schriftgröße, Breite, Position, usw.).

Ich möchte den Button daher abhängig von der Bildschirmgröße leicht verändern (2 oder vielleicht 3 Versionen).

Hat dazu jemand einen Tipp? Bitte möglichst konkret :-)


RE: Button an Bildschirmbreite anpassen - Schnapsnase - 23.11.2019

Arbeite im css statt mit px mit % oder vw und vh.
Alternativ kann man ein Media-Query definieren. Dann ist die Größenänderung allerdings stufenweise.


RE: Button an Bildschirmbreite anpassen - falcao1010 - 23.11.2019

Ich habe die px durch eine Formel ersetzt, die ich noch aus anderem Zusammenhang hatte. Was meint Ihr, ist das Ergebnis jetzt so in Ordnung?


RE: Button an Bildschirmbreite anpassen - Schnapsnase - 23.11.2019

(23.11.2019, 12:14)falcao1010 schrieb: Ich habe die px durch eine Formel ersetzt, die ich noch aus anderem Zusammenhang hatte.

"Deine" Formel kommt mir bekannt vor. Siehe hier  Big Grin.

Du definierst dort 1900px als 125% Viewportbreite. Kann man machen, aber warum?
Beim groben drüberschauen sieht`s aber eigentlich ganz gut aus. Wink


RE: Button an Bildschirmbreite anpassen - falcao1010 - 23.11.2019

Habe die Formel noch nicht recht verstanden ;-)

Ich finde den Button auf dem Smartphone in der Hochkant-Ansicht noch etwas zu breit. Komme da nicht richtig weiter ...


RE: Button an Bildschirmbreite anpassen - Schnapsnase - 23.11.2019

Code:
width: calc(120px + (200 - 120) * ((100vw - 320px) / (1900 - 320)));
height: calc(25px + (60 - 25) * ((100vh - 320px) / (1900 - 320)));
font-size: calc(15px + (24 - 15) * ((100vw - 320px) / (1900 - 320)));

Besser? Wink


RE: Button an Bildschirmbreite anpassen - falcao1010 - 23.11.2019

Ja, sehr schön, vielen Dank.