← Voltar para o catálogo Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include 响应式布局, 移动端适配, 断点, 容器查询, 横竖屏, 触摸目标.
Ver no GitHub ↗ Copiar URL do repo Copiar link do SKILL.md Licença: MIT Como adicionar Copiar comando /plugin marketplace add bovinphang/frontend-craft O comando exato pode variar conforme o repositório. Confira o README no GitHub.
Para o autor da skill
Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.
Markdown HTML
[](https://www.skillteca.com.br/skills/fec-responsive-layout?utm_source=badge&utm_medium=readme&utm_campaign=badge) Copiar snippet Alerta por categoria
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
响应式布局
适用于需要让页面、工具界面、表格、仪表盘或组件在多设备上稳定工作的前端任务。需要布局模式和检查清单时加载 references/responsive-layout-patterns.md 。
Purpose
用内容优先、移动优先和容器感知的方式设计响应式布局，避免只靠固定断点修补溢出。
Procedure
明确信息优先级：小屏先保留核心任务、关键操作和反馈；次要信息折叠、延后或移入详情层。
选择布局策略：简单页面用 mobile-first 断点；嵌套组件、卡片网格和侧栏优先考虑 container query。
设计流式尺寸：用 minmax()、clamp()、aspect-ratio、max-width、min-width: 0 和稳定网格轨道控制伸缩。
处理数据密集界面：表格、列表、看板和编辑器需要明确横向滚动、列优先级、冻结列或移动端摘要视图。
保证触摸与键盘：触摸目标、焦点路径、hover 替代、虚拟键盘、安全区域和横竖屏切换都要复核。
关联性能与资源：移动端减少首屏大图、重型图表、同步动画和不必要列渲染。
验证断点之间：检查 375px、768px、1024px、1440px，以及断点中间值是否溢出、遮挡或跳变。
Constraints
不把桌面版缩小当作移动端设计。
不让关键功能只依赖 hover 或宽屏侧栏。
不用固定高度掩盖内容变化；需要固定格式时用稳定约束和可滚动区域。
不用 viewport 字体缩放替代真实排版层级。
不让移动端横向溢出成为默认解决方案；只有数据表、画布或编辑器等明确场景可以局部横滚。
Expected Output
输出响应式信息优先级、断点或容器策略、关键组件布局模式、触摸/键盘要求、数据密集区域处理方案和验证结果。完成后页面在常见视口和输入方式下不溢出、不遮挡、可操作。
Ler descrição completa↓
Comentários · Nenhum comentário Ainda não há comentários. Seja o primeiro. 