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
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!
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
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.