Explication détaillée des fonctions de comparaison en CSS (exemple d'introduction)

Les fonctions de comparaison CSS sont prises en charge depuis avril 2020. J'aime utiliser ces fonctions, mais ma préférée est clamp(), qui est aussi celle que j'utilise le plus. Dans cette leçon, nous examinons ces fonctions de comparaison en détail.
clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。

Clamp(), Max(), 和 Min() 函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。【学习视频分享：css视频教程、web前端】

流体的尺寸和定位

在下面这个例子中，有一个手机样式，同时有两张图片放置在上面，如下所示:

当容器的宽度变小时，我们要缩小图片的尺寸，这样才不会变形。一般使用百分比单位来解决，如 width: 20%，但是这种方式没有给我们太多的控制。

我们希望能够有一个流体尺寸，要求有最小值和最大值，这就是 clamp 出场的地方。

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

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

装饰性元素

有时候，我们需要在页面边角加一些修饰元素，该修饰元素需要具有响应式，比如 PC 端是这样的（黑点部分）：

然后在移动端是长这样的：

为了做到这，我们可以使用媒体查询：

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

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

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

虽然这样做可以，但我们可以 clamp()函数，这样更简洁：

  .decorative--1 {
    left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {
    right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

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

流体高度

有时候，我们页面的主区的高度需要根据视口大小而变化。这种场景，我们倾向于通过媒体查询或使用视口单位来改变这种情况。

.hero {
  min-height: 250px;
}

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

我们也可以混合使用固定值和视口单位:

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

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

但需要注意在较大的视口上高度不能太过高，所以我们需要设置一个最大高度,使用CSS clamp()，我们可以只用一个CSS声明来设置最小、首选和最大高度。

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

当调整屏幕大小时，我们会看到，高度会根据视口宽度逐渐改变。在上面的例子中，50vmax表示着视口最大尺寸的 50%。

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

Loading Bar

进度条一般是从左到右一个加载过程，在 CSS 中，我们可以定位在左边：

.loading-thumb {
  left: 0%;
}

为了将进度条定位到最右边，我们可以使用 left: 100%，但这会带来一个问题。进度条会跑到容器外：

.loading-thumb {
  left: 100%;
}

这是正常的情况，100% 是从进度条的末端开始的，而进度条本身也有自己的宽度，所以实际宽度会大于容器的宽度。

我们可以使用 calc() 来减去的进度条宽度，这样就可以了，但这并不是100%有效：

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

我们来看下，如何利用CSS变量和比较函数来更好地实现：

.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;
}

上面的步骤如下：

• 首先，我们设定一个最小值为 0%

• 首选值是 --loading

  🎜

  Fonctions Clamp(), Max() et Min()

  🎜clamp() La fonction de la fonction est de limiter une valeur entre une limite supérieure et une limite inférieure lorsque la valeur. dépasse la valeur minimale et la plage de valeurs maximales, sélectionnez une valeur comprise entre la valeur minimale et la valeur maximale à utiliser. Il reçoit trois paramètres : valeur minimale, valeur préférée, valeur maximale. [Partage de vidéos d'apprentissage : tutoriel vidéo CSS, web front-end]🎜

  Taille et positionnement du fluide

  🎜Dans l'exemple ci-dessous, il y a un style de téléphone mobile avec deux images placées sur le dessus, comme indiqué ci-dessous :🎜 🎜 🎜🎜Quand le conteneur À mesure que la largeur diminue, nous devons réduire la taille de l'image afin qu'elle ne se déforme pas. Il est généralement résolu en utilisant des unités de pourcentage, telles que width: 20%, mais cette méthode ne nous donne pas beaucoup de contrôle. 🎜🎜Nous voulons avoir une taille de fluide qui nécessite une valeur minimale et maximale, et c'est là que clamp entre en jeu. 🎜

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

  🎜🎜🎜 Adresse du cas : codepen.io/shadeed/pen…🎜

  Éléments décoratifs

  🎜Parfois, nous devons ajouter des éléments décoratifs aux coins de la page, ce qui le nécessite est responsive, par exemple, le côté PC ressemble à ceci (partie point noir) : 🎜🎜🎜🎜Ensuite, cela ressemble à ceci sur le terminal mobile : 🎜🎜🎜🎜Pour ce faire, nous pouvons utiliser des requêtes multimédias : 🎜

  .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;
    }
  }

  🎜Pendant que cela fonctionne, nous pouvons clamp( ), qui est plus concise : 🎜

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

  🎜Exemple d'adresse : codepen.io/shadeed/pen…🎜

  Hauteur du fluide< /a> span>

  🎜Parfois, la hauteur de la zone principale de notre page doit changer en fonction de la taille de la fenêtre d'affichage. Dans ce scénario, nous avons tendance à changer cette situation via des requêtes multimédias ou en utilisant des unités de fenêtre. 🎜🎜🎜

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

  🎜 Nous pouvons également mélanger des valeurs fixes et des unités de fenêtre : 🎜

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

  🎜 Mais nous devons faire attention au fait que la hauteur ne peut pas être trop élevée sur des fenêtres plus grandes, nous devons donc définir une hauteur maximale, en utilisant CSS clamp()< /code> , nous pouvons définir la hauteur minimale, préférée et maximale avec une seule déclaration CSS. 🎜rrreee🎜Lors du redimensionnement de l'écran, nous verrons que la hauteur change progressivement en fonction de la largeur de la fenêtre d'affichage. Dans l'exemple ci-dessus, <code>50vmax représente 50% de la taille maximale de la fenêtre. 🎜🎜🎜🎜Cas Adresse : codepen.io/shadeed/pen …🎜

  Barre de chargement

  🎜< img src="https://img.php.cn/upload/image/431/985/253/166721548066686Explication détaillée des fonctions de comparaison en CSS (exemple dintroduction)" title="166721548066686Explication détaillée des fonctions de comparaison en CSS (exemple dintroduction)" alt="Explication détaillée des fonctions de comparaison en CSS (exemple dintroduction)"/>🎜🎜La barre de progression est généralement Un processus de chargement de gauche à droite. En CSS, on peut le positionner à gauche : 🎜rrreee🎜Afin de positionner la barre de progression à l'extrême droite, on peut utiliser left: 100%, mais cela soulèvera une question. La barre de progression s'affichera en dehors du conteneur : 🎜🎜🎜rrreee🎜C'est une situation normale, 100 % commence à partir de la fin de la barre de progression, et la barre de progression elle-même a également sa propre largeur, donc la largeur réelle sera supérieure à la largeur du conteneur . 🎜🎜Nous pouvons utiliser calc() pour soustraire la largeur de la barre de progression, ce qui est bien, mais ce n'est pas efficace à 100 % : 🎜rrreee🎜Voyons comment utiliser les variables CSS et fonction de comparaisons pour mieux implémenter : 🎜rrreee🎜Les étapes ci-dessus sont les suivantes : 🎜
  • 🎜Tout d'abord, nous définissons une valeur minimale à 0%< /code>🎜</li><li>🎜La valeur préférée est la valeur actuelle de la variable CSS <code>--loading🎜

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

  这里的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/

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

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!