This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

calc

The calc() function supports four operations: addition, subtraction, multiplication and division. The calc() function can be used for many types, such as Angle, length, frequency, time, percentage, number, and integer, because calc() has many constraints. So not all of these types can have calc() functions.

We cannot use data types in the calc() function that are not currently supported by CSS properties.

// All of the following are illegalwidth: calc(100% - 4deg);
width: calc(12s - 10);
Copy the code

In the calc() function, values with percentages or units before and after the operator cannot be multiplied and divided, but can only be added and subtracted. The right side of the slash in a division operation must be a non-zero numeric type. Calc () also has some restrictions on writing, minus and plus must have Spaces on both sides. There is no space on either side of the multiplication and division symbols, but Spaces are usually used to separate them for consistency.

We usually just need to define a CSS property, let other CSS styles build on that property, and then we can manipulate the CSS property values through JavaScript code, which can dynamically change throughout the web.

Min and Max and clamp functions

Syntactically similar to calc(), min(), Max (), clamp() functions can be used anywhere the Angle, length, frequency, time, percentage, number, and INTEGER data types can be used. Moreover, min(), Max (), clamp() and Calc () functions can be nested with each other. demojs

width: calc(min(600px, 87vw) / 3);
Copy the code

The min() function supports one or more expressions, each separated by commas, with the value of the smallest expression as the return value. And the expression of the min() function can be a mathematical expression, such as an arithmetic operator.

width: min(11px * 11, 11rem);
width: min(calc(22px * 43), 88em);
width: min(75px * 43, var(--width))
Copy the code

width: Min (11vw, 6em, 81px) has 2 relative lengths and 1 fixed length value, so the maximum width calculated is 81px, but the actual width should be determined according to the browser viewport width. When the browser viewport width is less than 800px, or the text size is less than 16px, The actual width value will be smaller, which means that although the name of our function min() is used to indicate smaller, the function is used to limit the maximum value.

The Max () and min() functions have similar syntax, with the main difference being that Max () returns a maximum value, while min() returns a minimum. width: Max (11vw, 6em, 80px) where the minimum width is 80px, but if the browser width is larger than 800px, or the text size is larger than 16px, the final width will be very large. This means that although Max () represents the maximum value, it serves to limit the minimum value. This is the opposite of min(), except that the Max () function has other properties similar to min().

The clamp() function returns a range of values. Grammar usage: Clamp (MIN, VAL, MAX), where MIN represents the minimum value, VAL represents the preferred value, MAX represents the maximum value, meaning that VAL is within the range of MIN and MAX, VAL is used as the function return value, if VAL is greater than MAX, MAX is used as the return value, if VAL is less than MIN, Clamp (MIN, VAL, MAX) is actually equivalent to MAX (MIN, MIN (VAL, MAX)) by using MIN as the return value.