Container
Queries

// ResponsiveCard.tsx —— 真正可复用的自适应组件
interface Product {
  image: string;
  name: string;
  description: string;
  price: number;
  rating: number;
  category: string;
}

export function ResponsiveCard({ product }: { product: Product }) {
  return (
    // ↓ 这一行让此 div 成为容器上下文
    <div style={{ containerType: "inline-size" }}>
      <article className="card">
        <img src={product.image} className="card-img" />
        <div className="card-body">
          <h3 className="card-title">{product.name}</h3>
          <p className="card-desc">{product.description}</p>
          <div className="card-meta">
            <span className="tag">${product.price}</span>
            <span className="tag">★ {product.rating}</span>
            <span className="tag">{product.category}</span>
          </div>
          <div className="card-actions">
            <button className="btn-primary">Add to Cart</button>
            <button className="btn-ghost">Save</button>
          </div>
        </div>
      </article>
    </div>
  );
}

/* ResponsiveCard.css —— 无需任何 JS 断点逻辑 */
.card {
  display: flex;
  flex-direction: column;     /* 默认：纵向堆叠 */
  gap: 1rem;
}

/* ── 容器 ≥ 350px → 横向布局 ── */
@container (min-width: 350px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }
  .card-img {
    width: 96px;
    height: 96px;
    border-radius: 16px;
  }
}

/* ── 容器 ≥ 550px → 宽松横向 + 元信息 ── */
@container (min-width: 550px) {
  .card       { padding: 1.75rem; gap: 1.5rem }
  .card-img   { width: 160px; height: 160px }
  .card-title { font-size: 1.5rem }
  .card-meta  { display: flex }   /* 默认 hidden */
}