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

ただし、より大きなサイズでは高さが高すぎないように注意する必要がありますCSSclamp()を使用すると、たった 1 つの CSS ステートメントで最小高さ、推奨高さ、および最大高さを設定できます。

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

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

codepen.io/shadeed/pen…

ローディング バー

.loading-thumb { left: 0%; }

left: 100%を使用できますが、これにより問題が発生します。プログレス バーはコンテナの外で実行されます:

.loading-thumb { left: 100%; }

calc()を使用してプログレス バーの幅を減算することはできますが、これは 100% 効果的ではありません:

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

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

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

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

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

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