CSS容器查询革命：自适应组件设计与响应式布局新范式

一、容器查询核心原理

超越媒体查询的组件级响应式方案：

/* 定义容器上下文 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 基于容器宽度的样式调整 */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 120px 1fr;
    padding: 1.5rem;
  }
  
  .card__title {
    font-size: 1.25rem;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .card__image {
    border-radius: 8px;
  }
}

/* 容器单位应用 */
.card__stats {
  padding: 1cqw; /* 基于容器宽度的1% */
  margin: 0.5cqh; /* 基于容器高度的0.5% */
}

核心优势：组件自治、布局精确控制、代码解耦、维护性提升

二、高级应用模式

1. 动态表单布局

<div class="form-container">
  <div class="form-group">
    <label>用户名</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password">
  </div>
</div>

<style>
.form-container {
  container-type: inline-size;
}

.form-group {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@container (min-width: 350px) {
  .form-group {
    grid-template-columns: 120px 1fr;
    align-items: center;
  }
}

@container (min-width: 600px) {
  .form-group {
    grid-template-columns: 200px 1fr;
  }
  
  input {
    padding: 0.75rem;
  }
}
</style>

2. 自适应导航栏

<nav class="nav-container">
  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="logo">Company</a>
  <div class="nav-links">
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Products</a>
    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Services</a>
  </div>
</nav>

<style>
.nav-container {
  container-type: inline-size;
  display: flex;
  padding: 1rem;
}

@container (max-width: 500px) {
  .nav-container {
    flex-direction: column;
  }
  
  .nav-links {
    margin-top: 1rem;
  }
}

@container (min-width: 800px) {
  .nav-container {
    justify-content: space-between;
    padding: 1.5rem 2rem;
  }
  
  .logo {
    font-size: 1.5rem;
  }
}

@container (min-width: 1200px) {
  .nav-links {
    display: flex;
    gap: 2rem;
  }
}
</style>

三、创意布局实战

1. 响应式产品卡片

<div class="products">
  <article class="product-card">
    <img src="product.jpg" alt="">
    <div class="content">
      <h3>产品名称</h3>
      <p>产品描述内容...</p>
      <div class="footer">
        <span>$199</span>
        <button>加入购物车</button>
      </div>
    </div>
  </article>
</div>

<style>
.products {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;
}

.product-card {
  display: grid;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

@container (min-width: 300px) {
  .product-card {
    grid-template-columns: 150px 1fr;
    padding: 1rem;
  }
  
  .footer {
    grid-column: span 2;
  }
}

@container (min-width: 500px) {
  .product-card {
    grid-template-columns: 1fr;
  }
  
  img {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  
  .footer {
    grid-column: auto;
    display: flex;
    justify-content: space-between;
  }
}

@container (min-width: 800px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .product-card {
    grid-template-rows: auto 1fr auto;
  }
  
  .content {
    padding: 1.5rem;
  }
}
</style>