ui topic / 布局与响应式
Layout & Responsive Behavior
在不同视口和设备上组织容器、网格、间距和内容优先级。
Key fields
Identity
- Subtype
- UI 设计语境主题
- Parent Taxonomy
- Web Interface Design
- Hierarchy Level
- UI 设计语境 · 主题
What
- Definition
- 在不同视口和设备上组织容器、网格、间距和内容优先级。
Why
- Core Question
- 内容如何在尺寸变化时保持层级、可读和可操作？
- Classification Purpose
- 建立桌面、平板和移动端的布局规则。
Where
- Applicable Context
- Master–Detail Workspace, Universal Web Design, Aspect Ratio, Bleed, Flow, Inline, Layer, Safe Area Insets, Breakpoint, Scroll Area
Lifecycle
- Status
- 草稿
Related content
Relationships come from the local knowledge graph and include reverse links.
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Aspect RatioAspect RatioRelated
纵横比约束内容的宽高比例，保证媒体和容器在不同尺寸下稳定缩放。
- BleedBleedRelated
允许内容突破父容器内边距或列宽，形成全宽或出血式布局。
- BreakpointBreakpointRelated
定义响应式布局在容器或视口变化时切换结构和密度的阈值。
- FlowFlowRelated
描述块级内容沿阅读方向自动排列、换行和形成间距的布局基础。
- InlineInlineRelated
描述行内内容的排列、对齐、换行和内联间距。
- LayerLayerRelated
定义元素在层叠上下文中的层级、遮挡与定位关系。
- Safe Area InsetsSafe Area InsetsRelated
为刘海、圆角屏幕、系统手势区和窗口边缘提供安全内边距。
- Scroll AreaScroll AreaRelated
定义可滚动区域的边界、滚动条、滚动阴影和键盘/触控行为。
- Resize HandleResize HandleReverse · Related
调整面板、列、窗口或媒体尺寸的拖拽手柄。
- ScrollbarScrollbarReverse · Related
表达可滚动区域位置和可操作范围的滚动条。
- Resizable PanelResizable PanelReverse · Related
允许用户拖拽调整面板、列或区域尺寸的复合容器。
- SplitterSplitterReverse · Related
把相邻区域分成可拖拽调整大小的面板。
- Master–Detail WorkspaceMaster–Detail WorkspaceRelated
左侧集合/列表与右侧详情/编辑区联动的工作台布局。
- Universal Web Design通用 Web 设计框架Related
一个不绑定真实网站的 Web 界面知识框架，用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。