移动优先设计（Mobile-First Design）是一种以移动端为基础、再针对更大屏幕逐步增强的界面设计方法。
用途 用于构建响应式网站，从移动端屏幕开始设计，然后为更大设备做渐进增强。
断点划分 资料给出的断点如下：
- Mobile：320-480px，对应 iPhone SE、小型 Android 设备。
- Tablet：481-768px，对应 iPad mini。
- Desktop：769-1024px，对应 iPad Pro、笔记本电脑。
- Large：1025px 及以上，对应桌面显示器。
移动优先 CSS 基础样式面向移动端，例如 .container 使用 padding: 1rem；.nav 在移动端 display: none 隐藏；.nav-toggle 显示为汉堡菜单。 在 @media (min-width: 768px) 中，.container 改为 padding: 2rem、max-width: 720px、margin: 0 auto；.nav 改为 display: flex；.nav-toggle 改为 display: none。 在 @media (min-width: 1024px) 中，.container 的 max-width 改为 960px。
触控友好设计 最小触控目标为 48x48px，例如 .button 设置 min-height: 48px、min-width: 48px、padding: 12px 24px。 同时需要足够间距，例如 .list-item 设置 padding: 16px、margin-bottom: 8px。
性能要求 资料给出的性能目标为：First Contentful Paint 在 3G 下小于 3 秒；JS bundle 压缩后小于 100KB；页面总重量小于 500KB。
渐进增强 分三层实现：第一层为语义化 HTML，在没有 CSS/JS 时也能工作，例如 nav 中包含指向 /home 和 /about 的链接；第二层由 CSS 增强外观；第三层由 JS 增加交互性。
最佳实践 从 320px 宽度开始设计；使用相对单位（rem、%、vw）；在真实设备上测试；为移动端优化图片；减少初始加载的 JavaScript；确保文字无需缩放即可阅读。
适用场景 适用于构建响应式网站、优化移动端体验，以及需要按移动优先思路组织断点、触控目标与性能预算的前端开发工作。
限制 资料未提供该技能的具体安装方式、收费模式、支持平台或工具集成信息，这些内容暂未提供。