Detailed explanation of comparison functions in CSS (example introduction)

CSS comparison functions have been supported since April 2020. I like to use these functions, but my favorite is clamp(), which is also the one I use most. In this lesson, we look at these comparison functions in detail.

Clamp(), Max(), and Min() functions

clamp() The function of Limit a value between an upper limit and a lower limit. When the value exceeds the range of the minimum and maximum values, select a value between the minimum and maximum values ​​to use. It receives three parameters: minimum value, preferred value, maximum value. [Learning video sharing: css video tutorial, web front-end]

The size and positioning of fluid

is below In the example, there is a mobile phone style with two pictures 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. This way it won't deform. It is generally solved using percentage units, such as width: 20%, but this method does not give us much control.

We want to have a fluid size that requires a minimum and maximum value. This is where clamp comes in.

.section-image {
  width: clamp(70px, 80px + 15%, 180px);
}

Example address: codepen.io/shadeed/pen…

Decorative elements

Sometimes, we need to add some decorative elements to the corners of the page, which need to be responsive. For example, the PC side looks like this (black dot part):

Then it looks like this on the mobile side:

In order to do this, we can use media queries:

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

@media (max-width: 600px) {
  .decorative--1 {
    left: -8rem;
  }

  .decorative--2 {
    right: -8rem;
  }

Although this can be done, But we can use the clamp() 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);
  }

Example address: codepen.io/shadeed/pen…

fluid height

Sometimes, the height of the main area of ​​our page needs to change according to the viewport size. In this scenario, we tend to change this situation through media queries or using viewport units.

.hero {
  min-height: 250px;
}

@media (min-width: 800px) {
  .hero {
    min-height: 500px;
  }
}

We can also mix fixed values ​​and viewport units:

.hero {
  min-height: calc(350px + 20vh);
}

@media (min-width: 2000px) {
  .hero {
    min-height: 600px;
  }
}

But we need to pay attention to the height not being too high on larger viewports. So we need to set a maximum height. Using CSS clamp(), we can set the minimum, preferred and maximum height with just one CSS statement.

.hero {
  min-height: clamp(250px, 50vmax, 500px);
}

When the screen is resized, we will see that the height will gradually change according to the viewport width. In the above example, 50vmax represents 50% of the maximum viewport size.

Example address: codepen.io/shadeed/pen…

Loading Bar

The progress bar is generally a loading process from left to right. In CSS, we can position it on the left:

.loading-thumb {
  left: 0%;
}

In order to move the progress bar To position it to the far right, we can use left: 100%, but this will cause a problem. The progress bar will run outside the container:

.loading-thumb {
  left: 100%;
}

This is normal, 100% starts from the end of the progress bar, and the progress bar itself also has its own width, So the actual width will be greater than the width of the container.

We can use calc() to subtract the width of the progress bar, so that's it, but this is not 100% effective:

.loading-thumb {
  /* 40px represents the thumb width. */
  left: calc(100% - 40px);
}

Let's take a look , how to use CSS variables and comparison functions to achieve better implementation:

.loading-thumb {
  --loading: 0%;
  --loading-thumb-width: 40px;
  position: absolute;
  top: 4px;
  left: clamp(
    0%,
    var(--loading),
    var(--loading) - var(--loading-thumb-width)
  );
  width: var(--loading-thumb-width);
  height: 16px;
}

The above steps are as follows:

• First, we set a minimum value as 0%

• The preferred value is the current value of the --loading CSS variable

• 最大值代表当前的加载量减去进度条件的宽度

这里的CSS clamp()为我们提供了这个组件的三种不同的状态信息，这个方案很 nice:

不仅如此，我们还可以以相同的方式来处理不同UI

.loading-progress {
  width: clamp(10px, var(--loading), var(--loading) - 10px);
}

最小值等于圆圈宽度的一半，首选值是当前的加载百分比，最大值是当前百分比与圆圈一半的减去结果。

事例地址：codepen.io/shadeed/pen…

动态分割器

考虑下图，我们在两个区域之间有一个行分隔符。

在移动端上，这个分隔符应该变成水平的，如下图：

我的解决方案是使用一个边框和flex。思路是，边框作为伪元素，以填补垂直和水平状态的可用空间：

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section:before {
  content: "";
  border: 1px solid #d3d3d3;
  align-self: stretch;
}

@media (min-width: 700px) {
  .section {
    align-items: center;
    flex-direction: row;
  }
}

我们也可以使用 clamp 而不需要媒体查询的解决方案：

.section {
  --breakpoint: 400px;
  display: flex;
  flex-wrap: wrap;
}

.section:before {
  content: "";
  border: 2px solid lightgrey;
  width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}

来剖析一下上面的CSS:

• 0px：最小值，用于垂直分隔符。它的值是 0，因为我们使用的是一个CSS边框
• (var(--breakpoint) - 100%) * 999 是一个个切换器，根据视口宽度在 0px或 100% 之间切换。

动态 border Radius

一年前，发现了一个巧妙的CSS技巧。使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}

来剖析一下上面的CSS:

• 我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。

• min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。

• 9999 是一个很大的数字，这样 min 的值都是 8px

间距

有时，我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。

.wrapper {
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
  grid-gap: min(2vmax, 32px);
}

原文地址：https://isdeed.com/article/use-cases-css-comparison-functions/

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Detailed explanation of comparison functions in CSS (example introduction). For more information, please follow other related articles on the PHP Chinese website!