电商首页核心是3秒内传递“卖什么”“为什么信”“怎么买”，需用CSS Grid布局、picture/srcset优化图片、aspect-ratio锁定卡片比例，并持续监控LCP与CLS指标。
电商首页不是堆砌模块就行，核心是让关键信息在 3 秒内被用户感知到——首屏必须明确传递“卖什么”“为什么信”“怎么买”。所有布局决策都该服务于这个目标。
用 grid 而不是 float 或旧式 inline-block 做整体结构
现代电商首页响应式要求高，grid 能直接定义行列关系，避免浮动塌陷、清除 hack 和行高错位问题。尤其轮播区+导航栏+商品宫格这种多区域对齐场景，grid 的 grid-template-areas 写法最直观。
- 首屏区域建议划分成
"header banner nav goods"这类语义化命名，方便后续媒体查询重排 - 避免给
grid容器设固定高度，改用minmax(0, 1fr)防止内容溢出截断 - IE11 不支持
grid？那就用display: flex降级——但只降级到主容器，内部商品列表仍可用grid（加@supports判断）
picture + srcset 控制首屏大图加载质量
电商首页 Banner 图常被写成单张 img 标签，结果在手机上下载 2MB 的桌面图，首屏加载慢 2 秒以上。必须按设备像素比和视口宽度分发资源。
- 用
picture包裹多个source，每个source加media和srcset，最后放一个兜底img -
srcset里别只写x，优先用w单位（如banner-800w.jpg 800w），浏览器能结合sizes属性更准判断 - 务必压缩 WebP 格式备用：
type="image/webp"放在source里，不支持的浏览器自动 fallback 到img的 JPG
商品卡片用 aspect-ratio 锁定比例，别靠 JS 算高宽
商品图尺寸不一导致卡片高度跳变，用户滚动时会误触、体验割裂。CSS aspect-ratio 是目前最轻量解法（Chrome 88+、Firefox 89+、Safari 15.4+ 已全支持）。
立即学习“前端免费学习笔记（深入）”；
- 给商品图外层容器设
aspect-ratio: 4/3，再配合object-fit: cover，图片自动裁剪居中 - 老浏览器降级方案：用伪元素
::before+padding-top: 75%实现垂直方向占位，再绝对定位内容 - 别在卡片里用
height: 100%强制拉伸图片——会模糊且破坏 SEO（图片没自然尺寸）
真正难的不是写出结构，而是每次加一个新模块（比如直播入口、会员弹窗）时，重新校验首屏 LCP 是否仍低于 2.5s、是否触发 CLS（布局偏移）。这些没法靠模板解决，得盯着 Chrome DevTools 的 Performance 和 Experience 面板调。
