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.