布局模型用弹性流式替代固定像素，避免固定布局陷阱禁止用width:1200px等固定宽度，在手机上会出现横向滚动条，改用max-width:100%内容不超过屏幕宽度和相对单位%、rem、vw，容器宽度设为width:90%左右留10%边距，适配不同屏幕max-width:1200px桌面端不无限拉伸。
移动端导航栏实现图标居左，菜单按钮居右避免浮动导致的错乱，产品列表平板桌面端一行自动分配空间，无需手动计算宽度，移动优先写法先写移动端样式默认单栏，扩展平板桌面端样式代码更简洁，避免重复覆盖。
内容优先级不同设备展示该看的内容，移动端核心信息隐藏装饰性元素，如大幅背景图、冗余的品牌故事保留操作按钮，如：购买、咨询和关键内容，如产品价格核心功能用折叠面板，收纳次要内容产品详情中的规格参数、默认折叠点击展开避免页面过长。
桌面端补充扩展信息展示关联推荐，如：你可能还喜欢用户评价等增强决策的内容，保留完整导航栏无需折叠为汉堡菜单，方便用户快速跳转，性能优化拒绝适配了但加载慢，响应式网页易因加载全尺寸资源，桌面端大图在手机上加载，导致移动端卡顿需从资源适配、代码精简、加载策略、图片、媒体。
按需加载不同尺寸资源图片适配自动匹配，让浏览器根据设备宽度加载对应尺寸的图片，避免手机加载2000px宽的大图，用WebP/AVIF格式比JPEG小50%，通过图片压缩工具批量处理，视频适配控制加载尺寸与自动播放，移动端禁用视频自动播放、浪费流量添加明显的播放按钮，用保持视频比例避免拉伸变形。
