CSS卡片移动端适配技巧与解决方案

避免给卡片设置固定像素宽度（如 width: 300px），改用百分比或相对单位，让其根据父容器自动调整。

例如：

.card {
  width: 90%;
  max-width: 400px;
  margin: 10px auto;
}
  

这样在小屏幕上卡片会自动缩窄，在大屏幕上也不会无限拉伸，max-width 能防止内容过宽影响阅读。

通过 media 查询针对不同设备设置不同的样式。常见断点包括手机（小于768px）、平板（768px~1024px）、桌面端（大于1024px）。

示例：

/* 手机端：单列布局 */
@media (max-width: 767px) {
  .card-container {
    flex-direction: column;
    align-items: center;
  }
  .card {
    width: 95%;
    margin: 10px 0;
  }
}
<p>/<em> 平板及以上：多列布局 </em>/
@media (min-width: 768px) {
.card-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
width: 45%;
}
}</p><p>@media (min-width: 1024px) {
.card {
width: 30%;
}
}</p>

这样能确保卡片在不同设备上都有合适的排列方式和间距。

除了宽度和 media 查询，还可以：

• 使用 flexbox 或 grid 布局替代浮动，更易适配移动端
• 为图片设置 max-width: 100% 防止溢出
• 字体大小可使用 rem 或 vw 实现响应式文本
• 添加 viewport meta 标签 确保页面正确缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">