商品卡片需用响应式单位（rem/%）配合max-width:100%、box-sizing:border-box及aspect-ratio控制尺寸与比例；价格组用flex基线对齐；折扣标绝对定位；按钮增强:active反馈并禁用重复提交；iOS图片放大改用background-position模拟；必设alt属性与焦点可访问性。
怎么让商品卡片在不同屏幕下都保持合理间距和比例
直接用 px 写死宽度或 margin 会导致小屏溢出、大屏留白过多。必须用响应式单位组合：移动端优先设 max-width: 100%，配合 padding 用 rem 或 %，外层容器加 box-sizing: border-box 避免内边距撑大尺寸。
- 图片区域统一用
aspect-ratio: 4/3（现代浏览器）或伪元素 hack（旧版）控制宽高比，防止拉伸变形 - 文字行高用
line-height: 1.4而非固定px，适配缩放和字体大小变化 - 避免在
flex容器里对子项设width: 100%，容易触发 flex 的最小尺寸限制，改用flex: 1更稳妥
价格和折扣标签怎么对齐又不重叠
常见错误是把原价和折后价都设 display: inline-block 然后靠 vertical-align 对齐——一旦字体加载延迟或字号变化，立刻错位。正确做法是用 grid 或 flex 布局明确基线。
.price-group {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.price-group .original {
text-decoration: line-through;
color: #999;
}
.price-group .current {
font-weight: bold;
font-size: 1.25rem;
}
- 折扣标签（如 “-30%”）建议绝对定位在右上角，父容器设
position: relative，避免影响流式布局 - 不要用
margin-top: -Xpx往上提折扣标，会破坏可访问性（屏幕阅读器顺序错乱） - 所有价格数字用
font-variant-numeric: tabular-nums，保证多位数对齐
加入购物车按钮点击反馈太弱怎么办
纯 CSS 实现的按钮状态只有 :hover 和 :active，但用户常反馈“点没点上”，尤其在触摸设备上。需要补足视觉反馈链：
-
:active必须有明显样式变化（如背景色加深、transform: scale(0.98)），且持续时间不能低于 100ms - 添加
transition: all 0.2s ease到按钮本身，避免:hover突然跳变 - 禁用状态（如库存为 0）不仅要灰掉，还要加
cursor: not-allowed和pointer-events: none - JavaScript 触发添加动作后，应临时禁用按钮并替换文字为 “已加入”，防止重复提交
为什么商品图放大功能在 iOS 上失效
iOS Safari 对 transform: scale() + overflow: hidden 组合有渲染 bug，常导致放大后内容被裁切或卡顿。绕过方式是不用纯 CSS 放大，改用 background-size: cover + background-position 模拟缩放效果。
立即学习“前端免费学习笔记（深入）”；
.product-image {
background-size: cover;
background-position: center;
transition: background-position 0.3s ease;
}
.product-image:hover {
background-position: center 20%;
}
- 真·放大需求（如点击弹出大图）务必用
z-index分层，且给弹层加will-change: transform提升合成层 - 避免在
img标签上直接写width/height属性，用 CSS 控制，否则响应式时容易失真 - 所有图片必须带
alt属性，即使为空也要写alt=""，否则屏幕阅读器会读出文件名
