CSS min(), max() and clamp()
I’ve recently started using CSS functions for responsive design.
min()
This function takes one or more values and returns the smaller one at any given time. The values can be percentages or fixed. I personally use min() when setting the width of my containers.
I have been using min() on my containers for ultimate responsiveness. This example will keep the container’s width between 90% of the viewport and 1000px maximum. If 90% computes to a value smaller than 1000px, the browser chooses the smaller value.
When my screen size is small, the container will be 90% of the screen, and it will not exceed 1000px as the screen size grows.
max()
This function is the inverse of min() and is used in a similar way. It takes one or more values and returns the larger value at any given time. One thing to note is that we need to use different units for the values in the min() and max() functions.
clamp()
This css function takes three values, a minimum, an ideal, and a maximum. A common use case of clamp is for fluid font sizing. Clamp allows you to set a font that grows with the viewport, but doesn't go above a minimum or maximum font size. The ideal value is the one that will be used as long as it is in-between the minimum and maximum values.
