用Flex布局对齐商品主图与描述区需设外层min-height、图片区flex:0 0 480px、描述区flex:1并overflow-y:auto；价格按钮用flex-wrap+white-space:nowrap；图片必加alt、loading="lazy"及picture fallback；按钮反馈需状态类+aria-label。
用 Flex 布局快速对齐商品主图与描述区
商品详情页最常卡在左右两栏高度不一致、图片撑不开或文字溢出——根本原因是没设容器最小高度，也没处理 flex 项的伸缩行为。别依赖 height: 100%，它在嵌套中极易失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器设
display: flex，并加min-height: calc(100vh - 80px)（减去 header 高度） - 左侧图片区用
flex: 0 0 480px固定宽度，避免被压缩；加max-width: 100%和height: auto保比例 - 右侧描述区用
flex: 1占满剩余空间，并设overflow-y: auto防长文案撑爆视口
让价格和购买按钮在小屏下不换行错位
响应式里最典型的翻车点：.price 和 .btn-buy 在 375px 宽度下强行并排，结果按钮被挤到下一行，或者价格文字折行。这不是媒体查询写得少，而是没控制内联元素的换行策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把价格和按钮包进一个
<div class="action-bar">，设display: flex+flex-wrap: wrap - 给
.price加white-space: nowrap，防止 “¥299.00” 被拆成两行 - 给
.btn-buy设flex: 1 1 auto，并在@media (max-width: 480px)中改为flex: 1 1 100%单独占满一行
图片懒加载 + 备用 fallback 避免白屏和 SEO 损失
直接写 <img src="product.jpg"> 在弱网下会白屏几秒，且没 alt 或 loading="lazy" 会影响 Lighthouse 评分和搜索收录。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写
alt属性，内容是“品牌+型号+核心卖点”，例如alt="Apple AirPods Pro 第二代 主动降噪 空间音频" - 启用原生懒加载：
loading="lazy"（所有现代浏览器都支持） - 加一层低质量占位图（LQIP）：用
src指向 base64 编码的 10×10 模糊图，srcset指向高清图，靠picture元素做 fallback
<picture>
<source srcset="product.webp" type="image/webp">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect width='10' height='10' fill='%23eee'/%3E%3C/svg%3E"
srcset="product.jpg"
alt="Apple AirPods Pro 第二代 主动降噪 空间音频"
loading="lazy">
</picture>点击“加入购物车”后按钮状态反馈不能只靠文字变色
仅把 .btn-buy 的 color 从蓝色改成绿色，用户根本不确定操作是否成功——尤其在移动端，没有 hover 状态，缺乏即时视觉确认。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 添加 CSS 类
.btn-buy--added，用background-color+border-color+transform: scale(0.98)组合反馈 - 按钮文字切换为 “✓ 已加入”，但必须保留原始文字在
aria-label里，例如aria-label="已将 Apple AirPods Pro 加入购物车" - 禁用状态要加
pointer-events: none和opacity: 0.6，否则手指悬停时仍会触发伪类
细节上最容易被忽略的是图片格式兼容性：WebP 在 Safari 14+ 才完全支持，如果项目需兼容旧版 Safari，<picture> 的 <source> 必须放在 <img> 标签之前，且 <img> 的 src 必须是 JPEG/PNG。否则老 Safari 会直接不渲染图片。
