Media queries vs min() max() and clamp()

what’s the difference between media queries and min() max() and clamp()

is one better than the other? does it depend on your specific circumstances?

i just started min() max() and clamp() so this a learning curve for me

Hi obxjuggler,

With both media queries and min(), max(), clamp() you can set a size based of the size that is available. The differents that I see is dat media queries is set on a selected width were as min() max() and clamp() don’t need an instruction at which screen width this rule will be used. When min() max() and clamp() were used in a smart way I think you can create the same result in less lines of code. On the other hand gives media queries more control how it will look on different screen width’s.

Hopefully I understand your question well and is my answer usefull.

thanks!

https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-css-functions/exercises/css-min-max

here are

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

and

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

the exact same thing?

also, how does the reverse work?

say

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

what is the longer, 2 line, code version?

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

?
are the 2

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

and

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

the exact same thing?

i hope you see what i am after here

also, these are widths… how do they work with font-sizes or other common uses

and please pass on anything else i should know :slight_smile:

thanks!!

I think you’re right about the idea that max() or first defining the width and then the min-width will give the same results. If you doubt about it maybe you can test it out in a code editor. For more information you can always check the Codecademy docs and cheatsheets, mdn docs, w3schools and Kevin Powell has great video’s on YouTube about css.