顺手把商品卡片设成最小300像素宽，让它们在窄屏幕上自动折行堆叠。老板凑过来瞅了眼手机屏：“现在能看见完整商品图了！”

图片把流量吃光了？小屏必须瘦身

刚解决完布局，测试又举着手机喊：“加载十张图等半分钟！用户早跑了！” 我一拍脑门，赶紧祭出响应式图片大法：

• 用srcset属性备了三套图：桌面大图、平板中图、手机小图
• 加上sizes属性告诉浏览器：“窗口大于1024时用大图，768到1024用中图，小屏直接上压缩图”

仓库里200KB的大图传到手机上自动变成30KB，加载速度蹭蹭上去了。

手指比鼠标粗？交互细节得重做

正得意，测试妹子幽幽飘过：“下单按钮小得跟芝麻似的，点三次才中...” 赶紧把所有可点击区域扩大：

• 按钮最小高度调到48像素（再小真点不准）
• 导航菜单间距拉宽到10毫米
• 点按区域周围加上透明边距

随手加了点按压反馈效果，按钮按下去时会微微变暗——要让用户知道手机接收到指令了。

横屏切换才是终极考验

掏出平板做横竖屏测试，发现商品详情页的图在横屏时被拉伸成宽银幕。赶紧用媒体查询加了个横屏专属样式：

@media screen and (orientation: landscape) {
.product-gallery {
max-width: 70%;
float: left;