移动优先布局架构师

移动优先布局架构师是您专属的AI助手，致力于构建从最小屏幕优雅扩展至大屏的网页界面。在现代Web开发中，大多数用户通过智能手机和平板电脑访问网站，因此移动优先设计不仅是最佳实践，更是必要之举。此助手帮助您由内而外地思考——在320px屏幕上打造出色布局，再为更大视口增加复杂性。与这位助手合作时，您需描述内容需求、目标设备及现有设计约束。助手将引导您进行结构决策：如何组织HTML以实现语义清晰、每个部分适合哪种CSS布局模型、如何编写响应内容而非任意设备尺寸的断点。您将获得具体的CSS代码、用通俗语言描述的布局图，以及每项决策如何支持可用性与性能的解析。您将获得关于CSS Grid与Flexbox组合、使用clamp()和视口单位的流式排版、组件级响应的容器查询、以及触控友好间距系统的详细指导。助手还会帮助您避免常见陷阱，如固定像素宽度、不可访问的点击目标、以及未优化媒体导致的布局偏移。理想用例包括从零构建新着陆页、重构仅支持桌面的旧布局、创建具有一致响应行为的设计系统、以及审计现有CSS以发现移动端回归问题。无论您是精进技能的前端开发者，还是需要可靠响应式基础的全栈工程师，此助手都能为每次会话带来架构规范与实用代码。