This is the 23rd day of my participation in the August Gwen Challenge.

Back in the day, CSS had to be compatible with all browsers, and I remember the agonizing choice between effect and usability. CSS can do a lot of things today, but browser compatibility only needs to be considered mainstream, and most major browsers support the latest CSS features. This paper summarizes the mathematical functions min, Max, Calc and CLAMP in CSS.

min()

Purpose of min() : To set the boundaries of the maximum allowed values in a way that includes the element’s response context. This may seem like the opposite of the name, but the result is that the supplied value will be the maximum allowed value for the property.

Given a width: min(80ch,100vw), the result is that in larger Windows, 80ch will be selected because it is the smaller of the two options, but it acts similar to the maximum available space based on context. Once the viewport shrinks, the value 100vw will be used because it is calculated to be less than 80ch, but it actually provides a maximum boundary for the width of the element.

.container 类

The example just provided is a new method for defining.container, with only a minor tweak. The min() function allows nesting of basic math, which means it can be flipped to subtract some space in exchange for defining left and right padding, as follows:

.container {
    width: min(80ch, 100vw - 2rem);
}
Copy the code

In larger Windows (that is, over 80ch in width), the element can be extended up to a maximum width of 80ch, and once the window is shrunk below that width, the width is 100VW-2rem, which defines the “fill” of 1rem on each side of the element.

In this example, you could also change the element to 100% instead of vw to respond to the width of the parent:

.container {
    width: min(40ch, 100% - 2rem);
    margin-right: auto;
    margin-left: auto;
}
Copy the code

The advantage of this definition is that you can respond to resizing without media queries.

In addition to the above usage, it can also be used for background definitions as follows:

.background-image {
    background: #efefef url(https://crayon.devpoint.cn/assets/images/bgs/main.jpg)
        no-repeat center;
    background-size: min(800px, 100%);
}
Copy the code

When the window width is over 800px, the maximum width of the background is 800px. When the window width is less than 800px, the background width is 100%.

max()

Purpose of Max () : Sets the boundary of the minimum allowed value in a way that includes the element’s response context. Is the opposite of min() introduced above. Here’s an example.

Define context margins

If the desktop size is 1280px and magnified 4 times, the content is equivalent to a 320px device. However, compared to mobile phones, its orientation is still horizontal. A window of this size means that there is much less area to read and perform operations. In addition, the size that appears to fit the phone becomes large when viewed in an enlarged window. Max () provides a more elegant way to handle boundaries, and REM is often used as a unit of size for mobile adaptation. But for larger Spaces used to separate portions of content, the following approach is used to allow the tall view to grow relative to each other and to reduce the distance of the shorter view, which applies to scaled views.

.element + .element {
    margin-top: max(8vh, 2rem);
}
Copy the code

In the above style, 8vh will be used in higher Windows, and 2REM will be used in smaller or larger Windows. For functions that have zoom function and need to be adapted to various mobile terminals, using this method can have a significant impact on the end user.

Prevents the browser from enlarging the text in the input box on iOS

Ever had to force the browser to zoom while focusing on form input on iOS? This results for any type less than 16px. Max () can easily solve this problem:

input {
    font-size: max(16px, 1rem);
}
Copy the code

The use of Max () in the code above ensures that no matter what value is supplied, the font size is at least 16px, preventing the browser from being forced to zoom.

calc()

Calc () uses: performs basic mathematical operations, often used for dynamic calculation of height and width values, supports + – * / operation, can interpolate between unit types (e.g. Rem to VW), and is mainly used for self-applicable window sizes in practical projects.

For example, the content area of a page is the entire window size except the navigation height. In the past, position: Absolute; To achieve adaptive height, using calc() is much cleaner.

.content {
    height: calc(100vh - 80px);
}
Copy the code

The 100vh value is updated dynamically when the window is resized or in a larger resolution or on mobile, so the height changes accordingly.

Generate palette

You can extend the functionality of calc() by passing in CSS custom properties. A very useful example is the use of HSL () to create a consistent palette. Given saturation, brightness, and initial hue values, calculate complementary values to build the complete palette.

.colors { --base-hue: 140; --saturation: 95%; --lightness: 80%; --rotation: 60; color: #222; text-align: center; }. Color {padding: 0.25rem; background-color: hsl(var(--hue), var(--saturation), var(--lightness)); } .color1 { --hue: calc(var(--base-hue)); } .color2 { --hue: calc(var(--base-hue) + var(--rotation)); } .color3 { --hue: calc(var(--base-hue) + var(--rotation) * 2); }Copy the code

clamp()

Clamp () is designed to clamp boundaries on acceptable values by restricting a value to an upper and lower limit, and by selecting a value between the minimum and maximum value when the value exceeds the minimum and maximum value range.

Clamp () functions accept three parameters in the following order.

  1. The minimum value in the range
  2. Ideal value/preferred value
  3. The maximum value in the range

One area you may have encountered using CLAMP () is for fluid typography. The basic idea is that the font size value can be flexibly adjusted according to the viewport size to prevent large headings from triggering overflows or taking up too much window space.

A very basic definition of the fluid H1 style:

H1 {font-size: clamp(1.75REM, 4VW + 1REM, 3rem); }Copy the code

Relative response filling

The interesting thing about using percentage as padding is that it’s relative to the width of the element, meaning it’s a bit like container-specific units, and you can use VW.

The following example uses the following padding definition, where padding grows and shrinks with respect to the width of the element. It will never be less than 1rem, and it will never be more than 3rem:

.element {
    padding: 1.5rem clamp(1rem, 5%, 3rem);
}
Copy the code

The biggest benefit of this padding over a media query is that because the padding definition is relative to the element, it gets larger when the element has more space on the page, and smaller if the element is placed in a narrow column. This requires a lot of coordination with the media query-based utility classes.

After the