现代电商商品列表应使用 flex 布局而非 float 或 inline-block，通过 min-width、flex: 1 1 auto、媒体查询切换 flex-direction、语义化标签（article/figure）、原生懒加载及 intersectionobserver 动画优化实现高性能响应式排列。
用 flex 布局控制商品排列，别用 float 或 inline-block
现代电商列表几乎都靠 display: flex 实现响应式列数切换，float 容易塌陷、inline-block 有空白间隙，维护成本高。关键不是“能排成行”，而是“在不同屏幕下自动调整列数且不溢出”。
常见错误是只写 .product-list { display: flex; flex-wrap: wrap; } 就完事，结果小屏下商品宽度没约束，图片被压扁或文字换行错乱。
- 必须给
.product-item设定最小宽度（如min-width: 260px），再配合flex: 1 1 auto让它弹性伸缩 - 用媒体查询控制最大列数：桌面端
flex-direction: row+justify-content: space-between；移动端直接flex-direction: column更稳妥 - 避免对
img直接设固定宽高，改用object-fit: cover+ 容器限高，防止拉伸变形
语义化结构优先用 article，别堆 div
商品项不是普通区块，而是独立内容单元，<article class="product-item"></article> 比 <div class="product-item"> 更准确。搜索引擎和读屏工具会据此识别内容重要性，对 SEO 和无障碍访问都有实质影响。
<p>容易忽略的是：每个 <code>article 应该有唯一 id（比如 id="product-123"），方便后续 JS 绑定事件或埋点统计，而不是全靠 class 查找。
-
<figure></figure>包裹商品图 +<figcaption></figcaption>放简短卖点，比纯<img>更语义清晰 - 价格建议用
<span class="price">¥99.00</span>而非<p></p>，避免层级过深影响样式复用 - 按钮统一用
<button type="button" class="btn-buy"></button>，禁用时加disabled属性，比 JS 控制显隐更可靠
移动端适配的关键不是“缩放”，而是“重排”
很多人以为加个 meta viewport 和媒体查询就叫响应式，其实真正在手机上体验差，常是因为商品卡片在小屏仍强行维持四列——结果每列只有 80px 宽，图片糊、字挤成一团、按钮点不准。
真正有效的做法是：在 @media (max-width: 768px) 下，把 .product-list 切换为 flex-direction: column，让每个商品占满整行，再通过 margin-bottom 控制间距。这样视觉节奏清晰，手指操作区域也足够大。
- 慎用
rem或em做卡片整体缩放，会导致字体、边距、圆角比例失调 - 图片懒加载用
loading="lazy"原生属性即可，不用额外 JS，但需确保 fallback 图片尺寸合理 - 悬停效果（如阴影、缩放）在触摸设备上无效，要用
@media (hover: hover)包裹，否则可能干扰点击反馈
性能陷阱：DOM 节点太多时，别用 CSS 动画做“逐个入场”
当商品列表超过 20 条，用 animation: fadeIn 0.3s ease-out 配合 nth-child 给每个 .product-item 加入场动画，会导致主线程卡顿，尤其低端安卓机上明显掉帧。
更实际的方案是：用 IntersectionObserver 监听进入视口的商品，只对可见区域内的节点触发动画；或者干脆放弃逐个动画，用 opacity + transform 批量过渡，视觉差异不大但性能好很多。
- 避免在
.product-item上写大量嵌套transition，尤其是涉及width、height的，会触发重排 - 价格数字如果含千分位（如 ¥1,299.00），用
<span class="price-integer">1</span><span class="price-decimal">,299.00</span>分离，方便单独加粗或变色 - 库存状态显示用
<meter value="75" min="0" max="100"></meter>比纯文字更直观，但需 fallback 文本（如<meter>75% in stock</meter>）
最常被跳过的细节是：商品图的 srcset 和 sizes 属性没配，导致手机加载桌面尺寸大图；还有按钮点击反馈（:active 样式）缺失，用户会觉得“没点上”。这些不显眼，但直接影响转化率。
