★ FEATURED ARTICLE 人工智能AI AgentAI 应用前端后端即时通讯交互助手工具调用【免费下载链接】holaOSOpen-source agentic workspace enterprises can make their own. Connect the systems you already run — 100 integrations, MCP, chat tools, apps, browser, local files — with shared memory. Any agent (Claude Code, Codex), any model, or BYOK. Set up in clicks, not months. Local-first: your data never leaves your machines.项目地址https://gitcode.com/GitHub_Trending/ho/holaOS点击查看免费下载本篇技术指南完整解读 holaOS 仓库内嵌的 frontend-design 技能中的响应式设计规范responsive-design.md。该规范服务于 holaOS 的 Agent 技能体系——当用户在对话中要求构建 Web 组件、页面、制品或应用时运行时会把这份参考文档随技能注入给模型指导其生成生产级、可响应、跨设备的界面代码。读完本文你将掌握移动优先的断点策略、基于输入方式而非仅屏幕尺寸的媒体查询、刘海屏安全区处理、响应式图片的完整用法以及 holaOS 桌面端真实落地的容器查询实践与真机测试方法论。一、规范在 holaOS 技能体系中的定位在深入具体技术点之前先说明这份文档的身世。它是 holaOS 运行时内置技能embedded skills体系中 frontend-design 技能的参考文档之一同目录下还并列着 color-and-contrast.md、typography.md、spatial-design.md 等七份规范。技能主文件 SKILL.md 的 frontmatter 声明了其用途Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications并在 Responsive 小节中指向本参考文档同时给出两条铁律DO使用容器查询container做组件级响应式DONT在移动端隐藏关键功能——要适配界面而不是截肢界面。从源码结构看这些技能文件由 workspace-skills.ts 负责发现与注入运行时通过embeddedSkillsRoot()定位harnesses/src/embedded-skills目录支持用HOLABOSS_EMBEDDED_SKILLS_DIR环境变量覆盖扫描每个含SKILL.md的子目录校验 frontmatter 中的name/description最终以skill name... location...引用的形式把正文注入模型上下文见 quotedSkillBlock。因此本参考文档的内容质量直接决定了 Agent 生成界面的响应式水准——这也是它值得逐条吃透的原因。二、Mobile-First先写移动端基线再用 min-width 分层叠加规范的第一条原则直指最常见的反模式Start with base styles for mobile, usemin-widthqueries to layer complexity. Desktop-first (max-width) means mobile loads unnecessary styles first.**移动优先mobile-first**要求先编写针对移动端的基线样式再通过min-width断点逐层叠加复杂度而桌面优先max-width会让移动端用户首先加载大量不必要的桌面样式造成带宽浪费与渲染负担。在 holaOS 桌面端的 base.css 中可以看到同样的从窄到宽思想在容器层面的应用窄面板max-width: 448px时强制弹层收敛宽度、设置行改为纵向堆叠/* Narrow panels: clamp popouts and stack settings rows. */ container panel (max-width: 448px) { [data-popover-popup], [data-menu-popup], [data-select-popup] { max-width: calc(100cqw - 24px); } /* Settings rows stack vertically inside narrow panels */ [data-layoutsettings-row] { flex-direction: column; align-items: stretch; gap: 10px; } }这段代码base.css与规范的核心主张完全一致先保证窄容器下可用再在宽容器中展开。它展示了 holaOS 对响应式的完整定义——不仅针对视口viewport还针对组件容器container两者共用同一套思维方式。三、断点内容驱动而非设备驱动Dont chase device sizes—let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there.规范反对追逐设备尺寸表iPhone 13 多宽、Pixel 7 多宽主张让内容决定断点从最窄开始拉伸直到布局断裂文字换行难看、间距失衡、元素重叠的位置就在那里加断点。并给出经验值三个断点通常足够640px、768px、1024px能用clamp()解决的就不要加断点——clamp(min, preferred, max)让字号、间距、列宽随可用空间连续流动天然免维护。与断点配套的还有两个来自 spatial-design.md 的补充技巧它们能让少断点成为可能自调整网格grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))无需任何断点即可实现每行至少 280px、能放几列放几列、剩余空间拉伸的自适应网格容器查询视口查询media只服务于页面级布局组件级响应必须用容器查询让同一组件在窄侧栏和宽主内容区自动切换形态而不必依赖任何视口 hack。四、检测输入方式而不是只看屏幕尺寸Screen size doesnt tell you input method.A laptop with touchscreen, a tablet with keyboard—use pointer and hover queries.触屏笔记本、带键盘的平板——屏幕尺寸完全无法反映输入方式。规范给出完整的pointer/hover媒体查询用法/* Fine pointer (mouse, trackpad) */ media (pointer: fine) { .button { padding: 8px 16px; } } /* Coarse pointer (touch, stylus) */ media (pointer: coarse) { .button { padding: 12px 20px; } /* Larger touch target */ } /* Device supports hover */ media (hover: hover) { .card:hover { transform: translateY(-2px); } } /* Device doesnt support hover (touch) */ media (hover: none) { .card { /* No hover state - use active instead */ } }关键红线不要依赖 hover 承载任何功能。触屏用户根本无法 hover悬停态只能作为增强功能必须始终可通过点击/触摸到达。这背后是渐进增强的响应式哲学先保证无悬停、无精指针环境下的完整可用再为增强能力加分。与此呼应的是 spatial-design.md 中的触控目标规范按钮可以视觉很小但触控目标必须 ≥ 44pxApple HIG 建议的触控最小尺寸。如果视觉尺寸不足用::before伪元素无侵入地扩展点击热区.icon-button { width: 24px; /* Visual size */ height: 24px; position: relative; } .icon-button::before { content: ; position: absolute; inset: -10px; /* Expand tap target to 44px */ }这与media (pointer: coarse)增大按钮内边距的思路互为表里粗指针设备上的交互热区永远要比视觉尺寸大。五、Safe Areas处理刘海屏与圆角现代手机普遍存在刘海、圆角与底部 Home 指示条。规范要求用env()读取安全区body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* With fallback */ .footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }要点有二env()四向取值safe-area-inset-top/right/bottom/left分别对应顶部刘海、横向圆角、底部 Home 条max()兜底padding-bottom: max(1rem, env(safe-area-inset-bottom))保证在无安全区的桌面浏览器上仍保有 1rem 基础内边距而不是塌成 0——这是移动端代码在桌面端不会失灵的通用技巧。同时必须在 meta 标签中开启viewport-fitcover否则env()取值恒为 0安全区处理完全不生效meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover注意viewport-fitcover会让页面延伸到屏幕圆角之下因此安全区 padding 与 viewport-fitcover 必须成对出现缺一不可。六、响应式图片srcset、sizes 与 picture图片是响应式中最容易做错的一环规范给出两套互补方案。6.1 srcset sizes按分辨率自适应img srchero-800.jpg srcset hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w sizes(max-width: 768px) 100vw, 50vw altHero image 工作原理拆解srcset列出候选图片及其真实像素宽度w描述符如400w、800wsizes告知浏览器该图片在页面上实际会显示多宽例如窄屏满宽100vw、宽屏半宽50vw浏览器综合**视口宽度 × 设备像素比DPR**自动选出最合适的文件在 2x 屏上50vw的图片槽位会被视为需要约100vw的物理像素资源从而选择更高分辨率的候选。6.2 picture艺术指导Art Direction当不同尺寸需要不同构图/裁切而非仅仅不同分辨率时用picture按媒体条件切换picture source media(min-width: 768px) srcsetwide.jpg source media(max-width: 767px) srcsettall.jpg img srcfallback.jpg alt... /picture桌面端展示横向宽幅构图wide.jpg移动端展示纵向竖幅构图tall.jpgimg作为最终的兜底与无障碍锚点任何source不匹配时回退到它且alt只写一次。判断用哪种只需换分辨率用srcset需要换构图用picture。规范还隐含提醒src本身也应提供保证最老浏览器可用。七、布局适配模式导航、表格与渐进式披露规范对三类高频组件给出了明确的移动端适配策略导航——三段式演进移动端汉堡菜单 抽屉drawer平板水平紧凑导航桌面带标签的完整导航。核心原则是渐进收敛而非删除同一组导航项在不同宽度下改变呈现密度而不是在移动端直接砍掉入口。表格——移动端转卡片 用display: block配合data-label属性把表格行重排为卡片式布局。每个单元格在窄屏下通过data-label注入列名保持列标题 值的可读对media (max-width: 640px) { table, thead, tbody, th, td, tr { display: block; } td::before { content: attr(data-label); /* 加粗或置灰作为行内列名 */ } }td>/* Opt-in helpers — set>赞分享人工智能AI AgentAI 应用前端后端即时通讯交互助手工具调用【免费下载链接】holaOSOpen-source agentic workspace enterprises can make their own. Connect the systems you already run — 100 integrations, MCP, chat tools, apps, browser, local files — with shared memory. Any agent (Claude Code, Codex), any model, or BYOK. Set up in clicks, not months. Local-first: your data never leaves your machines.项目地址https://gitcode.com/GitHub_Trending/ho/holaOS点击查看免费下载相关推荐GeoAI技术架构深度解析构建地理空间智能分析工作流GeoAI技术架构深度解析构建地理空间智能分析工作流 在当今数据驱动的世界中地理空间人工智能GeoAI正成为环境监测、城市规划、灾害响应等领域的核心技术人工智能计算机视觉GIS图像处理微调UI-TARS桌面应用重新定义电脑操作方式的视觉AI智能革命UI TARS桌面应用重新定义电脑操作方式的视觉AI智能革命 你是否曾幻想过只需要对电脑说句话它就能理解你的意图并自动完成所有操作传统的自动化工具需要复人工智能大模型AI Agent桌面应用GUI 自动化浏览器控制MCP 服务MCP Clients如何安装和配置 nvim-spider10分钟快速上手指南如何安装和配置 nvim spider10分钟快速上手指南 想要在Neovim中实现更智能的文本移动吗nvim spider插件是你的终极解决方案这款强大上一篇Arnis技术深度解析开源地理数据到Minecraft世界的架构实现下一篇WinUtil终极指南一键管理Windows系统的免费神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
