他のすべてを流動的にします

私たちは皆、レスポンシブデザインを知っていますよね？メディアを使用して照会します。いいえ、今、私たちは容器を使用してクエリをしましたよね？時々、FlexBoxまたは自動ストリーミングメッシュを巧みに使用します。大胆になりたい場合は、流動的なタイポグラフィを試すこともできます。

私は、「このサイズにレイアウトA、レイアウトCのための十分なスペースがあるまでレイアウトB」など、レスポンシブデザインが離散ブロックに分割されることが多いことに少し慣れていません。これは大丈夫で、機能し、Photofigvaの静的レイアウトとして画面を設計するワークフローに適しています（免責事項、ソフトウェア名を作成します）。しかし、このプロセスは私には妥協のようです。私は常に、レスポンシブデザインがユーザーにはほとんど見えないはずだと信じてきました。 K-Popチケットを購入してモバイルで私のウェブサイトにアクセスするために並んでいるとき、彼らは、1時間前に上司に必要とする巨大な曲がったゲームモニターに座っている経験とどれほど違いがあるかに気付くべきではありません。

このシンプルなヒーローバナーとそのモバイルに相当するものを考えてみましょう。申し訳ありませんが、デザインはラフです。画像はAIによって生成されますが、これはこの記事の唯一のAIで生成された部分です。

マングースとテキストの位置とサイズは異なります。これを達成する従来の方法は、<del>媒体</del>（ごめんなさい、コンテナ）クエリを使用して2つのレイアウトを選択することです。各レイアウトには、センタリングコンテンツなどの柔軟性があり、フォントサイズに少量の流体タイポグラフィがありますが、スタックバージョンにレイアウトを切り替えるポイントを選択します。したがって、ブレークポイント近くの幅では、レイアウトが少し空っぽに見えるか、少し混雑する場合があります。

他に何か方法はありますか？

事実はがを持っていることを証明しました。流体型化場セットの概念をほとんど何でも適用できます。これにより、親コンテナのサイズとともにスムーズに変化するレイアウトを作成できます。移行を見るユーザーはほとんどいませんが、結果を高く評価します。正直に言うと、彼らはそうするでしょう。

設計スタイルを開始

最初のステップでは、幅クエリとブレークポイントを使用するときのように、レイアウトを別々にスタイルしましょう。実際、コンテナクエリとブレークポイントを一緒に使用して、どのプロパティを変更する必要があるかを簡単に確認できるようにしましょう。

これは私たちのヒーローバナーのマークです、それは変わりません：

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

これは、関連するワイドバージョンのCSSです：

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

背景画像をA ::before

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

ライブデモで実行されているコードを見ることができます - 典型的なアプローチの制限を示すことは完全に静的です。

滑らかにしましょう

テキストと背景のサイズと位置の開始点とエンドポイントを取得し、スムーズにすることができます。テキストサイズは、すでによく知っている方法で流動的なタイポグラフィを使用します。結果は次のとおりです。コードを見た後、これらの式を説明します。

最初はテキストの位置とサイズの変更です：

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

これはモンゴルの画像の背景位置とサイズです：

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

コンテナクエリを完全に削除できます。

これらのclamp()式を説明しましょう。 top属性の式から始めます。

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

そこにコメントがあることに気付くでしょう。これらの表現は、なぜ魔法の数字が悪いのかについての良い考えです。しかし、それらはいくつかの同時方程式の解決策であるため、ここでそれらを避けることはできません - CSSはそれを行うことができません！

上限と下限は

に十分にはっきりしていますが、中央の式はこれらの同時方程式から来ています：clamp()

/* 行更改
 * -12,27 +12,32
 */

.details {
  /* ... 行 14-16 未更改 */
  /* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
  top: clamp(50px, 20.238cqi - 22.857px, 220px);

  /* 对 360px 宽的容器计算结果为 20px，对 1200px 宽的容器计算结果为 565px */
  left: clamp(20px, 64.881cqi - 213.571px, 565px);

  /* ... 行 20-25 未更改 */
  h1 {
    /* 对 360px 宽的容器计算结果为 3.5rem，对 1200px 宽的容器计算结果为 5rem */
    font-size: clamp(3.5rem, 2.857rem + 2.857cqi, 5rem);
    /* ... 字体粗细未更改 */

  }

  p {
    /* 对 360px 宽的容器计算结果为 2rem，对 1200px 宽的容器计算结果为 2.5rem */
    font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
  }
}

…ここで、fは長さの固定サイズ単位（すなわちpx）、vは可変サイズ単位（CQI）です。最初の方程式では、1CQIが12pxに等しい場合、式を220pxまで計算する必要があると言います。 2番目の方程式では、1CQIが3.6pxの場合、50pxが必要であり、このソリューションは次のとおりです。

…これは、計算に優しい式：

/* 行更改
 * -50,3 +55,8
 */

/* 对 360px 宽的容器计算结果为 -310px，对 1200px 宽的容器计算结果为 0px */
background-position-x: clamp(-310px, 36.905cqi - 442.857px, 0px);
/* 对 360px 宽的容器计算结果为 -25px，对 1200px 宽的容器计算结果为 0px */
background-position-y: clamp(-25px, 2.976cqi);
/* 对 360px 宽的容器计算结果为 710px，对 1200px 宽的容器计算结果为 589px */
background-size: auto clamp(589px, 761.857px - 14.405cqi, 710px);

に分類されます。

20.238cqi – 22.857px固定ユニットが異なる場合、それに応じて変数ユニットのサイズを変更する必要があります。したがって、

要素のフォントサイズの場合、

<h1></h1>======================================================================================================================================================= =================================================================================== 1CQIはコンテナ幅が1200pxの場合（デフォルトのUAスタイルシート、16pxに比べてREM）、1CQIは幅360pxの場合は0.225remです。

/* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
top: clamp(50px, 20.238cqi - 22.857px, 220px);

目標の単位によって方程式が異なることに注意する必要があります。

正直なところ、この退屈な数学を毎回行うのは退屈なので、使用できる計算機を作成しました。それはあなたの方程式を解くだけでなく（CSSをきれいに保つために最大3つの小数点以下）、式で使用するのに役立つコメントを提供して、それらがどこから来たのかを確認し、魔法の数字を避けることができます。お気軽に使用してください。はい、そこには同様の計算機がたくさんありますが、それらはタイポグラフィに焦点を当てているため、REMユニットの（正しく）。 CSSプリプロセッサを使用する場合、JavaScriptをポートできる場合があります。

現時点では、

clamp()関数は厳密に必要ではありません。いずれの場合も、コンテナの幅が360pxまたは1200pxの場合、clamp()の境界は値に設定されます。コンテナ自体はこれらの制限に限定されているため - min-widthおよびmax-width値を設定することにより、clamp()式は決して範囲を呼び出さないでください。しかし、私たちが心を変えた場合（私たちはそうしようとしています）、私はこのような暗黙の境界を見つけて維持するのが難しいので、clamp()を維持することを好みます。

害を避けます

私たちの仕事は終わったと考えることができますが、そうではありません。レイアウトはまだあまり役に立ちません。テキストはマングースの頭の上に直接あります。これがマングースを傷つけないことは保証されていますが、私はそれの外観が好きではありません。それでは、テキストがマングースに当たらないように、いくつかの変更を加えましょう。

最初のものは非常に単純です。マングースを左に移動して、道を作るようにします。最も簡単な方法は、補間の下端をより広い容器に変更することです。マングースが360pxまで下降するのではなく、450pxで完全に左に移動するように設定します。すべての流体式のスタートポイントとエンドポイントを同じ幅に合わせる必要がある理由はありません。そのため、他の式を360pxにスムーズに下げることができます。

信頼できる計算機を使用すると、バックグラウンド位置プロパティのclamp()式を変更する必要があります。

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

これにより状況が改善されますが、完全ではありません。私はそれをより速く動かしたくないので、次にテキストへの道を見ます。現在、以下に示すように、それは直線で移動します：

しかし、私たちはそれを曲げることができますか？はい、できます。

パスで曲がります

これを行う方法の1つは、上部座標の2つの異なる補間を定義し、線を異なる角度に配置してから、最小の補間を選択することです。このようにして、よりスティープな直線がより大きなコンテナ幅で「勝つ」ことができますが、コンテナの幅が約780px未満の場合、より浅い直線が獲得値になります。結果は、マングースを逃す曲線を備えた直線です。

値は変更のみを変更しますが、最初に2つの中間値を計算する必要があります。

これらの値については、慎重に選択されたミッドポイントを使用して正式に計算する代わりに、必要な結果が得られるまでエンドポイントを試しました。実験は計算と同じくらい効果的であり、必要な結果を達成できます。この場合、カスタム変数で繰り返される補間から始めます。コンテナクエリを使用してパスを明示的な部分に分割することもできましたが、これは数学のオーバーヘッドを減らすことはなく、top関数を使用することは私の目では簡単です。また、この記事は厳密にコンテナクエリに関するものではありませんよね？

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

このパスに沿ってテキストが移動します。ライブデモを開いて、それがどのように機能するかを確認します。

min() cssはすべてを行うことはできません

計算に関する説明の最後の点は、私たちができることとできないことに関して制限があるということです。最初のものは、すでにわずかに緩和されています。つまり、これらの補間は線形です。これは、フェードまたは他の複雑な動作が不可能であることを意味します。

もう1つの主要な制限は、CSSがこの方法で長さの値のみを生成できるため、コンテナまたはビューポートサイズに基づく流体の不透明度または回転角度を純粋なCSSに適用できないことです。プリプロセッサもここで私たちを助けることはできません。なぜなら、制限はブラウザでのcalc()の動作であるためです。

少量のJavaScriptに頼る準備ができている場合は、両方の制限を元に戻すことができます。コンテナの幅を観察し、ユニットレスCSSカスタムプロパティを設定するだけで十分です。これを使用して、テキストを次のように2次bezier曲線に従うようにします。

リストするにはあまりにも多くのコードがあり、Bezier曲線の数学的説明が多すぎますが、リアルタイムのデモンストレーションで確認してください。

のような式がCSSで失敗しない場合、JavaScriptさえ必要ありません。 2つの長さの比率を表すため、失敗する理由はありません。 1インチに2.54 cmのように、ビューポート幅が800pxの場合、1VWに8pxがあります。したがって、ユニットのない8つの値としてcalc(1vw / 1px)を計算する必要があります。 calc(1vw / 1px)

しかし、彼らは失敗するので、私たちにできることは、私たちの視点を述べて先に進むことだけです。

流体はすべて、すべてのレイアウトを解決しません

もちろん、サイズのクエリを必要とするレイアウトは常にあります。必要に応じて、そうすることを避ける理由はありません。また、クエリを使用してテキスト配置のグリッド定義を切り替えながら背景のサイズと位置をスムーズに調整することにより、2つの混合を避ける理由もありません。私のマングースの例は、デモンストレーションのために簡単にするように意図的に設計されています。

新しいアンカーポジショニングAPIを使用して、流体の位置決めの可能性に非常に興奮していることを付け加えたいと思います。アンカーポジショニングを使用して、画面上で2つの要素がどのように流れるかを定義することは可能ですが、これは後で説明する必要があります。

以上が他のすべてを流動的にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。