CSS电商商品卡片如何适配不同屏幕？-css教程-PHP中文网

结论：grid + auto-fit + minmax() 是最稳、代码最少、维护成本最低的方案；它通过 minmax(300px, 1fr) 设定卡片宽幅区间，auto-fit 自动均分剩余空间实现响应式列数变化，无需 media 查询。

css电商商品卡片如何适配不同屏幕？

直接说结论：用 grid + auto-fit + minmax() 是当前最稳、代码最少、维护成本最低的方案，比纯 flex 换行或手写多层 @media 更可靠。

为什么不用 flex-wrap 做商品卡片栅格？

很多人一上来就写 .card-container { display: flex; flex-wrap: wrap; }，看似能换行，但实际踩坑不断：

卡片宽度用 calc(33.33% - 20px) 时，小屏下可能因四舍五入导致最后一列“掉行”，出现空隙或错位
min-width 和 flex-basis 在不同浏览器中计算逻辑不一致，尤其 Safari 对 flex 的 gap 处理有延迟渲染问题
要真正实现“PC 3 列 → 平板 2 列 → 手机 1 列”，得写至少 2 层 @media，且每层都要重算 gap 和 width，容易漏改

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 怎么工作？

这行代码是核心，它让浏览器自己决定每行放几个卡片，而不是你硬编码列数：

minmax(300px, 1fr) 表示：每个卡片最小 300px 宽，最大占满剩余空间（1fr）
auto-fit 会把空余空间均分给所有卡片（哪怕只有一张），所以小屏下自动变成单列，且卡片撑满容器宽度
不需要写任何 @media，断点由内容宽度自然触发——只要容器宽度

示例片段：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));
  gap: 20px;
  padding: 20px;
}
```

图片和文字怎么不溢出、不变形？

卡片内部元素适配比栅格更易被忽略，常见错误是只调外层布局，不管内部：

图片必须加 object-fit: cover 和固定宽高比，否则拉伸变形：.card-img { width: 100%; height: 0; padding-top: 56.25%; /* 16:9 */ position: relative; }，再用绝对定位塞图
标题文字别用固定 px 字号，改用 clamp(1rem, 4vw, 1.25rem)，既保下限又防大屏撑爆
长商品名要用 text-overflow: ellipsis + white-space: nowrap + overflow: hidden，三者缺一不可
所有卡片加 box-sizing: border-box，否则 padding 会让 minmax() 计算失准