用途：把电商店面做移动端优先的响应式改造，提升手机端的可用性与转化率。适用时机包括移动流量占比超过 50%、新建店面规划 CSS 架构、审查现有店面的移动可用性问题，以及实现商品详情页粘性购买按钮、优化移动转化与购物车弃单。
主要能力与模式：按拇指可及区域布局；主“加入购物车”按钮滚出视口后显示粘性购买条；触控目标最小 44px（WCAG 2.5.5）；商品网格按可用宽度自动重排、不产生横向滚动；移动端购物车从侧边栏改为底部抽屉（bottom sheet）。
用法（按平台）：Shopify 使用移动优先 OS2.0 主题（Dawn、Sense、Craft），在 Theme Editor 中设置移动菜单为 Drawer、开启粘性头部、每行 2 个商品、筛选器以抽屉呈现、开启粘性加入购物车，按钮高度至少 44px，并用 PageSpeed Insights 查看移动端分数。WooCommerce 可选 Astra、Kadence 或 Flatsome，在 Customizer 中设置移动端每行商品数、粘性加入购物车与移动头部；Kadence 的 Header Builder 可拖动元素分排。BigCommerce 使用 Cornerstone，在 Customize 中设置断点，商品图库移动端堆叠，购物车启用 Mobile overlay 变为底部抽屉，分类页移动端 2 列。自建/无头：用 min-width 媒体查询写移动优先 CSS，断点建议 sm=640px、md=768px、lg=1024px，并实现响应式商品网格、粘性购买条与购物车抽屉。
要点与限制：样式使用 env(safe-area-inset-bottom) 适配 iPhone 底部指示条；全屏元素用 100dvh 而非 100vh；body 字号至少 16px 防止 iOS 聚焦自动缩放；滚动容器用 overscroll-behavior: contain；抽屉打开时给 body 加 overflow: hidden。仅在资料中给出前述平台与代码模式，具体定价、平台版本要求与效果数据暂未提供。