移动端券列表用flex替代float或inline-block可解决行高失控、留白过大、换行错位问题；核心是.flex容器+flex-wrap: wrap，子项用flex: 0 0 calc(50% - 8px)，配合gap、clamp()、aspect-ratio和object-fit等现代CSS特性消除不可控变量。
用 display: flex 替代 float 或 inline-block
移动端券列表最常见问题是行高失控、左右留白过大、换行错位——根本原因是用了过时的布局方式。float 在小屏幕下极易塌陷，inline-block 又受空格和字体大小影响，导致卡片宽度计算失准。
直接上 display: flex 容器 + flex-wrap: wrap，子项用 flex: 0 0 calc(50% - 8px)（假设双列、间距 8px），比写死 width: 48% 更可靠：
.coupon-list {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 替代 margin 手动算间距 */
}
.coupon-item {
flex: 0 0 calc(50% - 8px);
}
-
gap是关键：它不参与子元素 width 计算，避免因边框/内边距导致的换行异常 - 别用
width: 48%—— 遇到box-sizing: border-box和border时，实际宽度会超 50%，触发意外换行 - iOS Safari 12+ 和 Android Chrome 均已稳定支持
gap，无需降级方案
字体和内边距必须用 rem 或 vw 动态缩放
固定 px 的 padding 和 font-size 是紧凑感破防点。iPhone SE 屏宽 375px，用 14px 字体+12px 内边距，视觉上就“发虚”；而安卓大屏又容易撑开留白。
推荐组合：font-size: clamp(12px, 2.5vw, 14px) + padding: clamp(8px, 2vw, 10px)：
-
clamp()比媒体查询更轻量，且能平滑过渡，避免断层缩放 - 别依赖
viewport缩放（如initial-scale=0.5）—— 微信内置浏览器会禁用双击放大，用户无法手动调整文字大小 - 测试真机时重点看 iPhone 12 mini 和华为 Mate 50，这两款设备对
vw解析略有差异，clamp()能兜底
阴影和圆角必须关掉或极简化
优惠券卡片加 box-shadow: 0 2px 8px rgba(0,0,0,.1) 看似精致，实则在低端安卓机上强制触发层叠上下文，导致 position: relative 子元素渲染错位，卡片高度忽高忽低。
- 真要表现层次，改用单侧
border-bottom: 1px solid #eee，性能零损耗 - 圆角不超过
4px，iOS 上border-radius: 8px在某些机型会触发抗锯齿模糊，视觉上反而显得“松散” - 禁止用
filter: drop-shadow()—— 它会让整个元素脱离文档流，flex 布局下高度计算完全失效
图片资源必须用 object-fit: cover + aspect-ratio
券图尺寸不统一是布局崩坏的高频原因。后端返回的图可能是 600×200、300×300、甚至竖图，硬设 width: 100%; height: 80px 会导致拉伸变形或留白。
正确做法：
.coupon-img {
width: 100%;
aspect-ratio: 3 / 1; /* 强制宽高比，不依赖图片原始尺寸 */
object-fit: cover;
}
-
aspect-ratio已在 Chrome 88+、Safari 15.4+、Firefox 89+ 原生支持，移动端覆盖率超 97% - 不加
height，只靠aspect-ratio驱动，flex 容器才能准确分配空间 - 慎用
background-image+background-size: cover—— 语义错误（图片应为内容而非装饰），且无法设置alt，影响可访问性
真实项目里，紧凑感不是靠“压窄”实现的，而是消除所有不可控变量：去掉浮动、舍弃固定像素、砍掉冗余阴影、用原生 CSS 控制比例。最容易被忽略的是 gap 和 aspect-ratio 的组合——它们不显眼，但一旦缺失，任何微调都会在不同机型上反复失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
