CSS comparison function

There are three CSS comparison functions:

  • max()
  • min()
  • clamp()

Min and Max

The CSS min and Max functions are similar to the js functions. They are used to obtain the minimum or maximum value of multiple attributes. The attributes are separated by commas. Examples are as follows

width: min(100px,200px,300px); // The value is 100px height: Max (100px,200px,300px); / / values 300 pxCopy the code

As shown, the width is set to a minimum of 100px and the height to a maximum of 300px.

clamp

Clamp function requires 3 parameters, one minimum, one default, and one maximum, which are used to handle boundary values. If the default value is greater than the maximum value, the maximum value is taken, if the default value is less than the minimum value, the minimum value is taken, and if it is between the minimum and maximum value, the default value is taken.

Method of use

clamp(MIN,DEFAULT,MAX)
Copy the code

Clamp is equivalent to Max (MIN, MIN (DEFAULT, Max))

case

font-size: clamp(20px,10vw,40px);
Copy the code

When 10vw is less than 20px, the page width is less than or equal to 200px, the font should be at least 20px, and when 10vw is greater than 40px, the page width is greater than or equal to 400px, the font should be at most 40px. If it is between 200px and 400px, calculate according to width/10. Verify below

Less than 200 px.

More than 400 px.

Between 200px and 400px

compatibility

As you can see these three functions are recently come out soon, so compatibility is not very good, all domestic browser hang, mainstream basic can support the latest version of the browser, it’s a good thing, because the role of the three mathematics in response type development is obvious, perhaps in the future, this three functions in response to the proportion of type development will gradually improve.

Common usage scenarios

Several common usage scenarios are listed below

Sidebar response

For the layout of the sidebar, the fixed width of the sidebar is required. When the width exceeds the maximum, vw can be considered to fix the proportion of the sidebar

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }
Copy the code

Font response

Clamp limits the maximum and minimum values and then changes the default values in the middle depending on the window

font-size: clamp(20px, 10vw, 40px);

Gradual smooth transition

Gradient Specifies the gradient line of the gradient. If the transition is not smooth enough, there will be a clear transition line on the moving end

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);
Copy the code

Using min to modify, the transition will be a little smoother

background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);

Dynamic container width

In practice, for example, if we want to limit the width on the desktop and display 100% on the mobile, we need to write this

    .container{
      width: 1440px;
      max-width: 100%;
    }
Copy the code

Now we just need to

    .container{
      width: min(1440px,100%);
    }
Copy the code

It’s very straightforward.

conclusion

These three functions are suitable for responsive layout development and can be used in situations where compatibility is not a concern, but should not be used if compatibility is a concern. I’ve been summarizing CSS functions recently, and I welcome your attention. The source code is here, poke here, poke here