Easy responsive web design: min(), max(), clamp()
June 3, 2022
min()
Discord message written by me
Image description
tip to make website at least a little mobile responsive (WORKING, NO MEDIA QUERIES NEEDED!): use min() when setting width.
"width: 60%;" is wrong. Percentages are dependent on size of screen, and the element will look very small on small screens.
"width: min(600px, 90%);" is correct. On big screens, the element will be 600 pixels wide, but if the screen is smaller than 600px, the element will be 90% of the screen's width
Syntax: min(600px, 90%)
Pink = initial width or the width you want it to be; it NEEDS to be in px units. Blue = the element will be set as its relative width as soon as the screen detects the element's width to be X percent(%)/viewportwidth(%) of the screen/viewport. min() and max() need one pixel value and one relative value
You will most often use min() to make your elements responsive. It is most recommended to use absolute CSS units for the first value. min() is most useful for simple layouts that consist of only one 1 column.
I use min() the most
max()
Syntax: max(80%, 600px)
The element's width will be set as the percentage. The element's width will stop shrinking as soon as it reaches its minimum width.
clamp()
This is the combination of min() and max().
Syntax: clamp(150px, 80% , 600px)
The element's width will be its initial width, until the screen until the screen detects the element's width to be X percent(%)/viewportwidth(%). The element's width will be the relative width, until it reaches its minimum width
You can use these functions on other properties other than just width. Be curious and experiment. I hope you find these useful. Thanks for reading...