移动端电商首页需用流式结构+合理断点+视觉密度控制，而非缩放PC版；必须正确设置viewport（含maximum-scale=1.0和user-scalable=no），并用JS动态计算rem基准值以适配不同屏幕，避免文字截断、点击失效等问题。
移动端电商首页不能靠“缩放桌面版”糊弄过去，viewport 一设、flex 一写、图片一拉伸，就容易出现商品卡片错位、文字溢出、点击热区过小这些真问题。核心是用流式结构+合理断点+视觉密度控制，不是把 PC 版塞进手机屏幕里。
viewport 和 rem 基础配置别跳过
很多页面在 iPhone 上字体忽大忽小、按钮点不中，第一关就栽在这儿。必须确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 写对，尤其 maximum-scale=1.0 和 user-scalable=no 要一起用，否则 iOS 双击放大后布局会崩。
rem 方案现在仍实用，但别硬套 750px 设计稿的 100px = 1rem。建议用 JS 动态计算：document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';（以 375px 为基准，1rem = 16px）。这样在 414px 宽的 iPhone Plus 上也能等比缩放，避免商品标题文字被截断。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 只写
width=device-width，漏掉initial-scale，导致安卓 WebView 渲染异常 - 用 px 写 padding/margin 却又用 rem 写 font-size，造成视觉节奏断裂
- 在 CSS 中写死
html { font-size: 20px; }，完全忽略设备宽度差异
商品卡片用 flex-wrap 还是 grid？看行数稳定性
三列商品布局，flex 和 grid 都能实现，但行为差异明显：flex 的 flex-wrap: wrap 在最后一行不满三列时，会把剩余项左对齐，留大片空白；而 grid 默认按列数均分容器，最后一行自动撑满，视觉更紧凑。
推荐方案：
- 固定列数（如 3 列）且需严格对齐 → 用
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; - 需要兼容老安卓（display: flex; flex-wrap: wrap;，但要加
justify-content: space-between;并手动控制子项宽度：flex: 0 0 calc(33.333% - 8px);（减去 gap 的一半） - 商品图比例不统一（比如有横图有竖图）→ 必须给
.goods-img加object-fit: cover;，否则拉伸变形
注意：iOS Safari 对 gap 支持良好（≥14.0），但部分安卓 UC 内核仍不支持，可用 padding + margin 模拟。
图片加载和尺寸控制是性能关键点
电商首页首屏通常有 6–12 张商品图，全用 <img src="xxx.jpg" alt="HTML移动端布局怎么做电商首页？商品排版指南" > 会导致白屏时间长、滚动卡顿。必须做两件事：
- 用
srcset+sizes告诉浏览器按设备像素比选图：<img src="a@1x.jpg" srcset="a@1x.jpg 1x, a@2x.jpg 2x" sizes="(max-width: 375px) 100vw, 375px" alt="HTML移动端布局怎么做电商首页？商品排版指南" > - 所有商品图容器设固定宽高比（如 1:1），用
aspect-ratio: 1/1;（现代浏览器）或伪元素 hack（::before { padding-top: 100%; }）防止 FOUC - 懒加载用原生
loading="lazy"即可，别为了兼容 IE11 引入复杂 JS 库，移动端基本不用管 IE
一个易忽略的坑：height: auto 在 flex/grid 子项里可能被忽略，导致图片高度塌陷——必须显式设容器高度或用 aspect-ratio 锁定。
导航栏吸顶和搜索框交互要轻量
移动端顶部导航栏吸顶（position: sticky;）很常用，但别直接给 <header></header> 加 top: 0 就完事。真实场景下，它常和搜索框联动，用户一滑动就要收起分类入口、展开搜索框，这时候 JS 监听 scroll 容易掉帧。
更稳的做法：
- 用
IntersectionObserver替代scroll事件监听吸顶状态，零重绘 - 搜索框默认折叠，点击才展开；展开后用
transform: translateY(-100%);隐藏原导航栏，而不是display: none;（避免回流） - 输入框获得焦点时，iOS 会弹出键盘并推高页面，此时若页面有
fixed元素，可能被遮挡——改用position: absolute;+bottom: 0;并监听resize事件动态调整
最麻烦的其实是“返回顶部”按钮：它得在滚动超过一屏后才出现，但又不能靠 scrollY > window.innerHeight 硬判断，因为轮播图、广告位高度不确定。稳妥方式是用 getBoundingClientRect().top 检测第一个商品区块是否已滚出视口。
