Clamp(), Max(), and Min() functions
— The function of the clamp() function is to limit a value between an upper limit and a lower limit. When this value exceeds the range of the minimum value and the maximum value, select a value between the minimum value and the maximum value to use. It receives three parameters: minimum value, preferred value, maximum value.
Fluid Size and Orientation
In the following example, there is a mobile phone style, and two pictures are placed on it at the same
time, as shown below: When the width of the container becomes smaller, we need to reduce the size of the picture so that it will not be deformed. Generally use percentage units to solve, such as width: 20%, but this method does not give us much control.
We want to be able to have a fluid size that requires minimum and maximum values, and this is where the clamp comes in.
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
Demo address: https://codepen.io/shadeed/pen/qBYPdOq?editors=1100
decorative elements
Sometimes, we need to add some decorative elements to the corners of the page. The decorative elements need to be responsive, such as this on the PC side (the black dot part):
and then it looks like this on the mobile side:
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}
Although this works, we can clamp() the function, which is more concise:
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
demo address: example address: https://codepen.io/shadeed/pen/LYmzVZW?editors=1100