メディアクエリとの戦いはやめましょう!代わりに CSS コンテナクエリを使用する-CSSチュートリアル-php.cn

メディアクエリとの戦いはやめましょう!代わりに CSS コンテナクエリを使用する

DDD

リリース： 2024-11-21 09:16:11

オリジナル

1042 人が閲覧しました

Stop Fighting with Media Queries! Use CSS Container Queries Instead

メインコンテンツでは完璧に見えるのに、サイドバーでは壊れてしまうコンポーネントを構築したことがありますか? ?

メディアクエリは問題の半分しか解決しません。メディアクエリは、コンポーネントが実際に存在する場所ではなく、画面サイズを考慮します。そこでコンテナクエリが登場します。

メディアクエリの何が問題になっているのでしょうか?

このカードコンポーネントを構築したとしましょう:

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

ログイン後にコピー

モバイルでもデスクトップでも見栄えがします!あなたのチームメイトがそれを狭いサイドバーに入れるまでは。これで、「デスクトップ」レイアウトが 300 ピクセルのスペースに収まろうとしています。ああ。

CSS スキルを向上させたいですか? 「JavaScript を置き換えた最新の CSS テクニック」を参照して、純粋な CSS が複雑な JavaScript コードをどのように置き換えるかを確認してください。

コンテナクエリ: より良い方法

コンテナクエリでは、「画面の幅はどのくらいですか?」を尋ねる代わりに、「コンテナの幅はどのくらいですか?」と尋ねます。仕組みは次のとおりです:

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

ログイン後にコピー

これで、カードは画面ではなくコンテナに適応します。どこにでも置いておけば、すぐに使えます!

実際の例: スマートプロダクトカード

これは、あらゆるスペースに適応する製品カードです:

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

ログイン後にコピー

ブラウザのサポート?

朗報です！コンテナクエリは、最新のすべてのブラウザで機能します。古いブラウザの場合、モバイルレイアウトがフォールバックになります:

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

ログイン後にコピー