根本原因是元素宽高比被拉伸或字体/边框缺乏响应式约束；应优先用 aspect-ratio 锁定比例，配合 rem+viewport 动态缩放字号与间距，并以 SVG 背景替代伪元素实现稳定缩放。
移动端优惠券在小屏下变形，根本原因不是尺寸缩放，而是元素宽高比被强行拉伸或字体/边框未做响应式约束。直接给 width: 100% 或 vw 单位反而容易破坏视觉比例。
用 aspect-ratio 锁定券面长宽比
现代浏览器（Chrome 88+、Safari 15.4+、Firefox 89+）支持 aspect-ratio，这是控制优惠券不变形最直接的方式。它让容器无论宽度如何变化，都保持固定比例，避免因父容器收缩导致的压扁或拉长。
常见错误是只设 width 和 height: auto，但这样无法阻止内容撑开高度；或者用 padding-top 媒介法，维护成本高且不直观。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给优惠券外层容器（如
.coupon）设置aspect-ratio: 3 / 1（典型横版券比例），再配width: 100%和max-width: 375px - 内部文字、图标等子元素用
font-size: clamp(14px, 4vw, 16px)防止小屏字过大溢出 - 避免对
height做固定值设置，否则会覆盖aspect-ratio - 旧版 Safari 需加
min-height: 0兼容 flex 子项场景
.coupon {
width: 100%;
max-width: 375px;
aspect-ratio: 3 / 1;
border-radius: 12px;
overflow: hidden;
}
用 rem + viewport 缩放防字体错位
很多“变形”其实是文字在小屏上字号没缩，把圆角、边框、间距全顶开了。单纯用 px 写内边距或字体，会在 iPhone SE 等窄屏上显得拥挤甚至换行错位。
关键不是去掉单位，而是让所有可缩放的度量（padding、font-size、border-radius）统一锚定到根字号，再配合视口缩放策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 中设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，禁用双击放大（否则rem基准会漂移） - CSS 中用 JS 动态设置
html的font-size：例如按屏幕宽度等比缩放，375px → 16px，320px → 13.65px - 所有优惠券内部尺寸用
rem，如padding: 0.75rem 1rem、font-size: 0.875rem - 慎用
em——它会继承父级字体大小，嵌套深时易失控
用 background-image 替代伪元素画券边框
不少优惠券用 ::before/::after 叠加渐变或波浪边，但在小屏下，这些伪元素的 transform: scale() 或 background-size 往往没同步缩放，造成锯齿、断裂或偏移。
更稳定的做法是把券的装饰性轮廓（如波浪底边、斜切角、虚线框）做成 SVG 背景图，用 background-size: contain 或 100% 100% 控制铺满逻辑，由浏览器原生缩放渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出精简 SVG（无 JS、无外部引用），转成 Data URL 或独立文件
- 设置
background-image: url("data:image/svg+xml,...")，并配background-repeat: no-repeat和background-position: bottom - 避免用
clip-path做复杂裁切——iOS Safari 对小尺寸clip-path支持不稳定，易出现白边或裁切失效 - 如果必须用伪元素，确保其
width/height也走rem或vw，且不用top/left百分比定位（易受父容器缩放影响）
真正难的不是写出一个“看起来像”的优惠券，而是在 iPhone SE（320px 宽）、iPhone 14 Pro（393px 宽）、折叠屏展开态（720px+）下，所有圆角、文字行高、图标间距、阴影扩散值都保持视觉一致。这要求放弃“一套尺寸打天下”的思路，把每个可变维度（比例、字号、背景缩放）拆开控制，而不是堆砌媒体查询。
