画面サイズではなく、動作において考える

チェイス・マッコイは、プロジェクトグリッドを作成する際に「ギャップの問題」に関する素晴らしい記事を書きました。彼の議論は次のように要約することができます：CSSのマージンを使用して要素間隔を設定するにはどうすればよいですか？彼は、FlexBoxで使用すると、GAP属性は十分に完璧ではないことを指摘しました。たとえば、：

 .grid {
  ディスプレイ：Flex;
  ギャップ：10px;
}

現在、FlexBoxでGAPを使用することはFirefoxでのみサポートされており、いくつかのプロジェクトでこれを忘れています。これに注意してください。

とにかく、Chaseのブログ投稿の私のお気に入りの部分は、彼がAndy Bellがメディアクエリなしでレスポンシブレイアウトを作成するために言及したテクニックです。

 .grid {
  ディスプレイ：グリッド;
  グリッドギャップ：10px;
  Grid-Template-Columns：Repeat（auto-fill、minmax（150px、1fr））;
}

このCSSコードの機能は次のとおりです。

• 列と行の間に10pxのギャップがあるグリッドを作成します。
• 各列の最小幅は150pxです。
• 各列には同じ幅（1FR）があります。
• グリッドは、できるだけ多くの列を自動的に埋める必要があります。

このすべての最も賢いことは、私たちのグリッドがminmaxのために応答性を効果的に実装することです - ブラウザがサイズ変更された場合、グリッドは次のように少ない数の列に自動的に調整されます。

メディアの問い合わせはまったく必要ありません！もちろん、これを行うには他にもいくつかの方法がありますが、このアプローチはメディアクエリを避けるだけでなく、新しい方法でコンポーネントの設計と構築について考えることを教えてくれるからです。

チェイスは続きます：

この手法を使用すると、ブレークポイントを使用してプロジェクトが積み重ねられる画面サイズを指定する代わりに、積み重ねる前に要素が持つべき最小サイズを指定します。開発者が画面サイズの観点ではなく、動作からの応答性のあるデザインについて考えることを奨励するため、私はこれが好きです。

「画面サイズではなく動作」は、コンポーネントデザインについて考える優れた方法です！設計システムのコンポーネントを作成する際に私が抱えている問題の多くは、モービルデバイス、タブレット、デスクトップなど、画面サイズについて考えていて、これらのコンポーネントをこれらの制限に適応させようとしているためです。

行動の観点から考えることは、使用している画面またはデバイスの幅以外にコンポーネントに影響を与える他の多くの要因があるため、常により効果的です。たぶん、そのコンポーネントに別のコンポーネントを適合させたいと思うかもしれません。または、比較のために、いくつかの補助テキストをそれと揃えたいと思います。

いずれにせよ、Chrisが書いたように、コンテナクエリを所有する前に、画面サイズではなく動作の観点から考えることは実際には完全には不可能ではありません。

コンテナクエリは、常にCSSで必要な改善の一番上のリストです。一般的な見解では、コンテナクエリがある場合、ページサイズに基づいて多くのグローバルメディアクエリを記述しないということです。これは、私たちが実際によりローカルなコンテナを制御しようとしているためであり、これにメディアクエリを使用している唯一の理由は、CSSにある最高のツールであることです。私はこれを完全に信じています。

以上が画面サイズではなく、動作において考えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。