容器查詢通過讓組件根據(jù)父容器尺寸而非視口尺寸響應，解決了傳統(tǒng)媒體查詢的上下文依賴問題，1. 首先使用container-type 或container-name 定義查詢?nèi)萜鳎?. 然後使用@container 替代@media 編寫條件樣式，使組件在不同佈局中自適應，支持嵌套、多條件和命名容器，適用於網(wǎng)格、CMS 和設計系統(tǒng)，現(xiàn)代瀏覽器支持良好，真正實現(xiàn)組件級響應式設計。

CSS Container Queries are a game-changer for component-based web design. Unlike traditional media queries, which rely on the viewport size, container queries let elements adapt based on the size of their parent container —not the screen. This means components can be truly responsive no matter where they're placed.

Let's break it down.

What Problem Do Container Queries Solve?

Before container queries, making a component responsive usually meant checking the viewport width:

 .card {
  padding: 1rem;
}

@media (min-width: 480px) {
  .card {
    display: flex;
  }
}

But this has a flaw: the card changes based on the screen, not its container . So if you put a small card in a large sidebar, it might stretch awkwardly. Or if a wide card is placed in a narrow grid, it could break layout.

Container queries fix this by letting the component respond to its own container's size , making it context-aware.

How to Use Container Queries

To use container queries, two things are needed:

1. Set up a query container using the container-type property.
2. Write styles using @container instead of @media .

Step 1: Define a Container

 .widget-area {
  container-type: inline-size; /* or 'size' for 2D */
}

This tells the browser: “Everything inside .widget-area can now respond to its width.”

You can also use container-name to make it easier to target:

 .sidebar {
  container-name: sidebar;
  container-type: inline-size;
}

Or shorthand:

 .sidebar {
  container: sidebar / inline-size;
}

Step 2: Use @container in Your Component

 @container (min-width: 300px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

@container sidebar (min-width: 250px) {
  .card {
    padding: 1rem;
  }
}

Now, .card adapts when its container (eg, .widget-area ) is at least 300px wide— regardless of the viewport .

Key Features and Tips

• ? Nesting works : Containers can be nested. A child container doesn't inherit from parent containers unless explicitly queried.
• ? Multiple conditions : You can combine width, height, and even use style() queries (still emerging).
• ? Better for components : Especially useful in CMS layouts, grids, or design systems where the same component appears in different contexts.
• ?? Browser support : Good in modern browsers (Chrome, Edge, Firefox, Safari 16.4 ), but check caniuse if supporting older ones.

Real-World Example: Responsive Card Grid

 <div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
</div>

 .grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  padding: 1rem;
  border: 1px solid #ccc;
}

@container (min-width: 300px) {
  .card {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

@container (min-width: 500px) {
  .card img {
    width: 80px;
  }
}

Now each card adjusts based on the grid column width—not the screen. Drop the same card into a narrow sidebar or wide main area, and it just works.

Basically, container queries bring encapsulation to responsive design. Components become self-aware, adapting to their space like smart modules.

Not magic—just smarter CSS.

以上是CSS容器查詢解釋了的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！