响应式设计：让容器元素在不同分辨率下呈现不同表现

1. 未使用React时，SASS、Tailwind还是Styled Components怎么选？ #

• SASS：适合习惯原生CSS写法、需要层级化变量/混合宏的场景，编译后就是标准CSS，无额外框架依赖。复用移动端样式时，用@mixin就能快速封装并复用代码，学习成本低，和原生CSS衔接自然。
• Tailwind：原子化CSS框架，无需写大量自定义CSS，靠类名组合实现样式，响应式适配直接用内置断点前缀（如md:），开发效率高，但需要记忆类名，新手可能有一定上手成本。
• Styled Components：依赖React等前端框架，你没使用React的话直接排除。
  结论：优先选SASS（想延续原生CSS逻辑）或Tailwind（追求快速开发），根据自身编码习惯决定即可。

2. 纯CSS解决平板端产品卡片复用移动端样式的方法 #

核心思路是抽离卡片基础样式，仅在不同断点调整Grid布局，不修改卡片本身样式：

/* 移动端产品卡片基础样式（平板端直接复用） */
.product-card {
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 8px;
  /* 其他固定样式：字体、间距、图片尺寸等 */
}

/* 产品列表Grid布局 */
.product-grid {
  display: grid;
  gap: 1rem;
  /* 移动端：每行1个 */
  grid-template-columns: 1fr;
}

/* 平板端断点（示例用768px） */
@media (min-width: 768px) {
  .product-grid {
    /* 仅调整布局为每行3个，卡片样式完全复用移动端 */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 桌面端断点（示例用1200px） */
@media (min-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 如需修改桌面端卡片样式，再单独定义 */
    /* .product-card { ... } */
  }
}

如果需要局部调整卡片样式但保留大部分复用逻辑，用CSS变量统一管理：

:root {
  --card-padding: 1rem;
  --card-border-radius: 8px;
}

.product-card {
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  /* 其他固定样式 */
}

/* 仅在需要修改的断点调整变量或特定属性 */
@media (min-width: 1200px) {
  .product-card {
    --card-padding: 1.5rem;
    /* 只改动需要变化的属性，其余样式自动复用 */
  }
}

另外，容器查询（Container Queries）已成为稳定特性（Chrome 105+支持），若无需兼容旧浏览器，可让卡片根据父容器宽度适配，而非视口：

.product-grid {
  container-type: inline-size;
}

@container (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 卡片样式始终保持一致，除非在容器查询中特意修改 */
.product-card {
  /* 统一样式 */
}

3. 完整响应式电商迷你网站示例（纯CSS+HTML） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>迷你电商商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
    }

    :root {
      --primary-color: #2563eb;
      --card-gap: 1rem;
      --card-padding: 1rem;
      --border-radius: 8px;
    }

    .header {
      padding: 1rem;
      background-color: var(--primary-color);
      color: white;
      text-align: center;
    }

    .product-grid {
      padding: 1rem;
      display: grid;
      gap: var(--card-gap);
      grid-template-columns: 1fr;
    }

    .product-card {
      border: 1px solid #eee;
      border-radius: var(--border-radius);
      padding: var(--card-padding);
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .product-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
    }

    .product-title {
      font-size: 1rem;
      font-weight: 600;
    }

    .product-price {
      color: var(--primary-color);
      font-size: 1.2rem;
      font-weight: bold;
    }

    .add-to-cart {
      padding: 0.5rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: auto;
    }

    /* 平板端适配 */
    @media (min-width: 768px) {
      .product-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* 桌面端适配 */
    @media (min-width: 1200px) {
      .product-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
        margin: 0 auto;
      }
      .product-card {
        --card-padding: 1.2rem;
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>迷你电商商城</h1>
  </header>
  <main class="product-grid">
    <div class="product-card">
      <img src="https://picsum.photos/seed/product1/300/200" alt="时尚休闲T恤">
      <h3 class="product-title">时尚休闲T恤</h3>
      <p class="product-price">¥99</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
    <div class="product-card">
      <img src="https://picsum.photos/seed/product2/300/200" alt="舒适帆布鞋">
      <h3 class="product-title">舒适帆布鞋</h3>
      <p class="product-price">¥199</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
    <div class="product-card">
      <img src="https://picsum.photos/seed/product3/300/200" alt="简约双肩包">
      <h3 class="product-title">简约双肩包</h3>
      <p class="product-price">¥299</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
    <div class="product-card">
      <img src="https://picsum.photos/seed/product4/300/200" alt="运动健身手环">
      <h3 class="product-title">运动健身手环</h3>
      <p class="product-price">¥399</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
    <div class="product-card">
      <img src="https://picsum.photos/seed/product5/300/200" alt="无线蓝牙耳机">
      <h3 class="product-title">无线蓝牙耳机</h3>
      <p class="product-price">¥499</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
    <div class="product-card">
      <img src="https://picsum.photos/seed/product6/300/200" alt="智能保温杯">
      <h3 class="product-title">智能保温杯</h3>
      <p class="product-price">¥149</p>
      <button class="add-to-cart">加入购物车</button>
    </div>
  </main>
</body>
</html>

该示例实现：

• 移动端每行1个产品，平板端每行3个，桌面端每行4个
• 产品卡片样式在移动端和平板端完全复用，仅桌面端微调内边距
• 用CSS变量统一管理可复用样式属性，便于后续维护

内容的提问来源于stack exchange，提问作者Esthetic Nerd