Min() max() and clamp()


Joined
Feb 15, 2021
Messages
17
Reaction score
0
here are

Code:
.content {
  width: 50vw;
  max-width: 500px;
}

and

Code:
.content {
  width: min(500px, 50vw);
}

the exact same thing?

also, how does the reverse work?

say

Code:
.content {
  width: max(500px, 50vw);
}

what is the longer, 2 line, code version?

Code:
.content {
  width: 50vw;
  min-width: 500px;
}

?
are the 2

Code:
.content {
  width: max(500px, 50vw);
}

and

Code:
.content {
  width: 50vw;
  min-width: 500px;
}

the exact same thing?

anything else i should know?

MANY THANKS!!
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
151
Reaction score
24
Wellllllll, The result is the same and I guess we can say that they are all the same even though they reach the output in slightly different ways.
Using CSS like : width: max(500px, 50vw); is the way to go. This also works on font sizes, margins, and anywhere you have problems keeping the site looking the same at different page sizes.
 
Last edited:
Ad

Advertisements

Joined
Feb 15, 2021
Messages
17
Reaction score
0
ok!

thanks!

font-size:max(500px, 50vw);

my font size of 500px will apply when
Code:
500px
is greater than
Code:
50vw,
and
Code:
50vw
my font size of 50vw will apply when
Code:
50vw
is greater?

kindly confirm my code

i am struggling here :(

i am going to get into my code editor and play with it

are there predetermined min() max() functions that look good by themselves?

does that depend on something else? what is it?

i am still learning here....

what about using media queries?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top