用 display: grid + aspect-ratio + object-fit: cover 即可构建稳定、可访问、不抖动的产品展示页，无需依赖媒体查询硬切点，grid 的 auto-fill 与 minmax() 天然适配多端列数，配合伪元素 fallback 和语义化 html/aria，确保信息完整、操作可达、加载不跳。
display: grid` + `aspect-ratio` + `object-fit: cover` 就能搭出稳定、可访问、不抖动的产品展示页，不用媒体查询硬切断点也能适配绝大多数设备。
为什么别从 media query 开始写产品页
很多新手一上来就写 @media (max-width: 768px)，结果改完 PC 版，移动端又塌、图片错位、按钮被截半。问题不在断点数量，而在基础布局没立住——响应式不是“切屏适配”，是“弹性容器撑住内容”。Grid 的 auto-fill 和 minmax() 天然支持列数随宽度增减，比手写三套 media query 更鲁棒。
- PC 宽屏自动排 4 列，平板掉到 2–3 列，小屏退化为 1 列，全靠一行 CSS 控制：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - IE11 不认
auto-fill？那就 fallback 到display: flex; flex-wrap: wrap;+flex-basis: 280px，不加 media query 也能跑通 - 用 media query 强制改列数（比如“小屏必须 2 列”）反而破坏阅读流，用户在折叠屏上横向滚动会卡顿
图片占位防抖动必须做，且不能只靠 CSS
商品图异步加载时高度为 0，卡片突然塌陷，用户正滑动就会跳一下。这不是视觉问题，是 UX 故障。仅设 height: 180px 在高 DPR 设备上会模糊，仅靠 object-fit 又无法预留空间。
- 优先用
aspect-ratio: 3/4（Chrome 103+ / Firefox 98+ / Safari 15.4+ 支持），img自带比例，父容器无需额外样式 - 老浏览器 fallback：给
.product加伪元素：::before { content: ""; display: block; padding-top: 133%; }，再把img设为position: absolute - 绝对禁止在
<img>标签里硬写width="300" style="max-width:90%"—— 这会让 Chrome 强制按像素渲染，DPR=2 时图变糊，且无法响应式缩放
价格和 SKU 区的 HTML 结构不能偷懒
电商页面不是“看着像就行”，原价/现价/折扣信息要经得起审核，SKU 选择要支持无障碍读取。随便套个 <p>¥199</p> 或 <button>立即购买 ¥199</button>，上线前会被合规团队打回来。
- 价格必须语义化：
<span class="price-current">¥199</span> <del class="price-original">¥299</del>，不能只靠颜色或字体大小区分 - 限时折扣加
aria-label="距优惠结束还剩 1 小时 42 分钟"，屏幕阅读器可读，JS 也方便动态更新 - 颜色/尺寸选项用
<input type="radio" name="color" id="color-red">+<label for="color-red">红色</label>，禁用div模拟按钮 —— 否则键盘用户 Tab 不进去，视障用户无法聚焦
加入购物车按钮点击无反馈？先查这三件事
纯静态页没法真加购，但用户点下去毫无反应，就是体验断层。不是功能缺失，是交互信号没发出去。
- 按钮必须声明
type="button"，否则在<form></form>内会触发表单提交，整页刷新 - 加
aria-pressed="false"，点击后 JS 改成true，配合 CSS 的[aria-pressed="true"] { opacity: 0.7; }给视觉反馈 - 如果用
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="..."></a>伪装按钮，务必event.preventDefault()，否则页面跳到顶部，长列表里极其干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
