在网页开发中，卡片是展示信息的常用组件。但在移动端，固定宽度的卡片经常撑破屏幕，导致出现横向滚动条，内部图片和文字也容易溢出。通过css的media查询和百分比宽度，可以让卡片根据不同屏幕自动调整，保持良好的阅读体验。
为什么卡片在移动端适配不好
多数卡片在桌面端写了固定像素宽度，例如 width: 320px。手机屏幕本身只有三百多像素，再加边距和内边距，就会超出视口。另外，内部图片若设了固定尺寸，也会把卡片撑大。要解决这类问题，核心是让宽度变成相对值，并按屏幕宽度切换样式。
使用百分比宽度让卡片流动起来
把卡片外层容器的宽度改为百分比，它就会随父元素变化。配合 box-sizing: border-box 可以避免 padding 撑大实际占用宽度。
.card {
width: 100%;
box-sizing: border-box;
padding: 16px;
background: #f5f5f5;
border-radius: 8px;
}
.card img {
width: 100%;
height: auto;
}
上面代码中，卡片宽度占父容器百分百，图片也用百分百宽度，这样在任意屏幕都不会固定溢出。
用media查询处理小屏特殊样式
当屏幕很窄时，可能需要去掉卡片阴影、缩小字号或改为单列布局。media查询可以针对最大宽度写规则。
/* 桌面端默认两列 */
.card-list {
display: flex;
gap: 20px;
}
.card {
flex: 1;
}
/* 移动端改为单列并紧凑 */
@media (max-width: 600px) {
.card-list {
flex-direction: column;
gap: 12px;
}
.card {
font-size: 14px;
padding: 12px;
}
}
这里设定了 600px 为断点，小于该宽度的设备会采用移动端样式，卡片变为纵向排列，更贴合手机浏览。
常见误区与建议
- 不要只写百分比宽度却忘了图片，图片也要设 width: 100% 才会收缩。
- media查询断点应基于内容而非具体设备，常用 600px、900px 做初步划分。
- 用 <meta name="viewport" content="width=device-width"> 保证手机按真实宽度渲染，否则适配会失效。
简单完整示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-list { display: flex; gap: 20px; padding: 20px; }
.card {
flex: 1;
width: 100%;
box-sizing: border-box;
padding: 16px;
background: #eee;
border-radius: 8px;
}
.card img { width: 100%; height: auto; }
@media (max-width: 600px) {
.card-list { flex-direction: column; gap: 12px; padding: 12px; }
.card { font-size: 14px; }
}
</style>
</head>
<body>
<div class="card-list">
<div class="card"><img src="https://ipipp.com/demo.jpg"><p>卡片一</p></div>
<div class="card"><img src="https://ipipp.com/demo.jpg"><p>卡片二</p></div>
</div>
</body>
</html>
按照上述方式组合百分比宽度与media查询，卡片在移动端的适配问题就能稳妥解决，不需要引入复杂框架也能达到良好效果。