kleines CSS-Rätsel

[j.j.]

Hallo!

ich hab jetzt sinnlos Zeit verbracht, diese einfache, ihren Zweck erfüllende CSS-Kalkulation weiter zu vereinfachen, z.B. mit clamp().

Ist mir nicht gelungen.

@media (min-resolution: 1.1dppx) {
  .foo { --x: min(max(0.5vmin, 0.5vw), 2px) }
} 

Gute Nacht!

j.j.

[j.j.]

.foo { --x: min(max(0.5vmin, 0.5vw), 2px) }

Ich solltem mal ausschlafen war wohl alles Unsinn

j.j.

[j.j.]

.foo { --x: min(max(0.5vmin, 0.5vw), 2px) }

ok, jetz aber - was ich eigentlich wollte, ist das:

.foo { --x: min(2px, 0.5vw, 0.5lvh)

j.j.

[Gunnar Bittersmann]

@@j.j.

ok, jetz aber - was ich eigentlich wollte, ist das:

.foo { --x: min(2px, 0.5vw, 0.5lvh)

Ja, man kann die min()-Funktion (max() ebenso) auch mit mehr als zwei Werten füttern.

Übrigens auch mit weniger: min(<expression>) tut dasselbe wie calc(<expression>), ist aber ein Zeichen kürzer. Wenn man in der CSSBattle calc() verwendet, macht man was falsch. 😏

🖖 Live long and prosper

[j.j.]

Guten Morgen!

min(2px, 0.5vw, 0.5lvh)

... und weil in der Praxis für alle Browser™ auf Android und iOS vh und Lvh wohl dasselbe ist, geht es auch rückwärtskompatibel und trivial:

min(2px, 0.5vw, 0.5vh); Also Lärm um nichts, sorry!

j.j.

[j.j.]

min(2px, 0.5vw, 0.5vh); Also Lärm um nichts, sorry!

min(2px, 0.5vmin); (das hatte ich zuerst, hat aber nicht funktioniert wie gewünscht wegen falschem Testaufbau)

Klassischer Fall von warum einfach, wenn es auch kompliziert geht?

Karl Valentin kann das fast genauso gut

j.j.