使用百分比宽度和媒体查询实现响应式卡片布局，结合flexbox、max-width、viewport标签等优化适配移动端，确保在不同屏幕尺寸下正常显示。
移动端适配问题是开发中常见的挑战，尤其是CSS卡片在不同屏幕尺寸下容易出现错位、溢出或布局混乱。解决这类问题的关键是使用 媒体查询（media queries） 和 百分比宽度 来实现响应式设计。
使用百分比设置卡片宽度
避免给卡片设置固定像素宽度（如 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">
基本上就这些。合理使用百分比宽度结合 media 查询，能让卡片在各种设备上自然适配，提升用户体验。不复杂但容易忽略细节。
