{"id":308190,"date":"2020-05-11T16:34:03","date_gmt":"2020-05-11T23:34:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=308190"},"modified":"2020-05-11T18:52:22","modified_gmt":"2020-05-12T01:52:22","slug":"min-max-and-clamp-are-css-magic","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/min-max-and-clamp-are-css-magic\/","title":{"rendered":"min(), max(), and clamp() are CSS magic!"},"content":{"rendered":"\n
Nice video<\/a> from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with Sometimes pretty basic usage allows for tighter code, but the change to get there feels a little mind-bending. Like how to set a \u201cmax\u201d here, you really use The You don’t need a It’s reasonable you’d want to be setting a min and <\/em>max value. You can nest the functions to do this, but it’s less mind-bendy to do with Here’s the video embedded:<\/p>\n\n\n\nfont-size<\/code> usage, but they are just functions, so they can be used anywhere you’d use a number, like a length<\/a>. <\/p>\n\n\n\n\n\n\n\n
min()<\/code>.<\/p>\n\n\n\n
.el {\n width: 75%;\n max-width: 600px;\n\n \/* tighter, but the change from max to min feels weird *\/\n width: min(75%, 600px);\n}<\/code><\/pre>\n\n\n\n
min()<\/code> and
max()<\/code> functions can take more than two values, which is cool, but hard to keep straight what is going on! It would be nice if DevTools could tell you which one it picked at any given time.<\/p>\n\n\n\n
.el {\n width: min(100px, 25%, 50vh, 30ch);\n}<\/code><\/pre>\n\n\n\n
calc()<\/code> to do math inside! <\/p>\n\n\n\n
.el {\n width: min(10vw + 10%, 100px);\n}<\/code><\/pre>\n\n\n\n
clamp()<\/code>. <\/p>\n\n\n\n
.el {\n \/* Note we're always using a relative unit somewhere\n so that zooming stays effective. *\/\n font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);\n}<\/code><\/pre>\n\n\n\n