CSSの比較機能を詳しく解説（事例紹介）

CSS 比較関数は、2020 年 4 月からサポートされています。私はこれらの関数を使用するのが好きですが、私のお気に入りは clamp() であり、最もよく使用する関数でもあります。このレッスンでは、これらの比較関数を詳しく見ていきます。

Clamp()、Max()、および Min() 関数

clamp() Limit の関数上限値と下限値の間の値、最小値と最大値の範囲を超える場合は、最小値と最大値の間の値を選択して使用します。最小値、優先値、最大値の 3 つのパラメータを受け取ります。 [学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド ]

流体のサイズと位置

例では、以下に示すように、2 つの写真を同時に配置した携帯電話スタイルがあります。

コンテナの幅が小さくなった場合, 画像のサイズを縮小する必要があります。そうすれば、変形することはありません。通常、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…

fluid height

ページのメイン領域の高さは、ビューポートのサイズに応じて変更する必要がある場合があります。このシナリオでは、メディア クエリまたはビューポート ユニットを使用してこの状況を変更する傾向があります。

.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() を使用すると、たった 1 つの CSS ステートメントで最小高さ、推奨高さ、および最大高さを設定できます。

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

画面のサイズを変更すると、ビューポートの幅に応じて高さが徐々に変化することがわかります。上の例では、50vmax は最大ビューポート サイズの 50% を表します。

#アドレスの例:

codepen.io/shadeed/pen…

ローディング バー

プログレス バーは通常、左から右への読み込みプロセスです。CSS では、これを左側に配置できます:

.loading-thumb {
  left: 0%;
}

In orderプログレスバーを右端に配置するには、

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

  CSS 変数の現在の値です。

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

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

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

以上がCSSの比較機能を詳しく解説（事例紹介）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。