私たちは皆、レスポンシブデザインを知っていますよね？メディアを使用して照会します。いいえ、今、私たちは容器を使用してクエリをしましたよね？時々、FlexBoxまたは自動ストリーミングメッシュを巧みに使用します。大胆になりたい場合は、流動的なタイポグラフィを試すこともできます。
私は、「このサイズにレイアウトA、レイアウトCのための十分なスペースがあるまでレイアウトB」など、レスポンシブデザインが離散ブロックに分割されることが多いことに少し慣れていません。これは大丈夫で、機能し、Photofigvaの静的レイアウトとして画面を設計するワークフローに適しています（免責事項、ソフトウェア名を作成します）。しかし、このプロセスは私には妥協のようです。私は常に、レスポンシブデザインがユーザーにはほとんど見えないはずだと信じてきました。 K-Popチケットを購入してモバイルで私のウェブサイトにアクセスするために並んでいるとき、彼らは、1時間前に上司に必要とする巨大な曲がったゲームモニターに座っている経験とどれほど違いがあるかに気付くべきではありません。
このシンプルなヒーローバナーとそのモバイルに相当するものを考えてみましょう。申し訳ありませんが、デザインはラフです。画像はAIによって生成されますが、これはこの記事の唯一のAIで生成された部分です。
マングースとテキストの位置とサイズは異なります。これを達成する従来の方法は、<del>媒体</del>（ごめんなさい、コンテナ）クエリを使用して2つのレイアウトを選択することです。各レイアウトには、センタリングコンテンツなどの柔軟性があり、フォントサイズに少量の流体タイポグラフィがありますが、スタックバージョンにレイアウトを切り替えるポイントを選択します。したがって、ブレークポイント近くの幅では、レイアウトが少し空っぽに見えるか、少し混雑する場合があります。
他に何か方法はありますか？
事実はがを持っていることを証明しました。流体型化場セットの概念をほとんど何でも適用できます。これにより、親コンテナのサイズとともにスムーズに変化するレイアウトを作成できます。移行を見るユーザーはほとんどいませんが、結果を高く評価します。正直に言うと、彼らはそうするでしょう。
最初のステップでは、幅クエリとブレークポイントを使用するときのように、レイアウトを別々にスタイルしましょう。実際、コンテナクエリとブレークポイントを一緒に使用して、どのプロパティを変更する必要があるかを簡単に確認できるようにしましょう。
これは私たちのヒーローバナーのマークです、それは変わりません：
<div>
<div>
<h1>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
@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>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);
}
}…これは、計算に優しい式：
/* 行更改 * -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>LookOut</h1>
<p>Eagle Defense System</p>
</div>
</div>しかし、私たちはそれを曲げることができますか？はい、できます。
パスで曲がります
これらの値については、慎重に選択されたミッドポイントを使用して正式に計算する代わりに、必要な結果が得られるまでエンドポイントを試しました。実験は計算と同じくらい効果的であり、必要な結果を達成できます。この場合、カスタム変数で繰り返される補間から始めます。コンテナクエリを使用してパスを明示的な部分に分割することもできましたが、これは数学のオーバーヘッドを減らすことはなく、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)
流体はすべて、すべてのレイアウトを解決しません
新しいアンカーポジショニングAPIを使用して、流体の位置決めの可能性に非常に興奮していることを付け加えたいと思います。アンカーポジショニングを使用して、画面上で2つの要素がどのように流れるかを定義することは可能ですが、これは後で説明する必要があります。
以上が他のすべてを流動的にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
