4.2 KiB
alwaysApply, description
| alwaysApply | description |
|---|---|
| false |
页面必须是响应式布局，不允许任何元素溢出屏幕。
必须适配：
- 手机
- 平板
- 桌面
布局要求：
1 所有元素使用 flex 或 grid 布局 2 不允许使用固定宽度 3 必须使用 max-width 4 必须使用 box-sizing: border-box 5 页面内容不能超出 viewport 6 禁止 overflow-x
所有图片必须： max-width:100% height:auto object-fit:cover
页面内容必须考虑 header 高度， 主体区域必须使用 padding-top。
主体区域必须允许垂直滚动 overflow-y:auto
请编写一个现代前端页面。
要求：
1 页面必须是响应式布局 2 所有屏幕尺寸必须适配 3 不允许任何元素溢出屏幕 4 必须使用 flex 或 grid 布局 5 不允许使用固定宽度 6 图片必须 max-width:100% 7 页面必须适配手机、平板、桌面 8 包含 media query (768px / 1024px) 9 不允许出现 horizontal scroll 10 所有组件必须保持在 viewport 内
代码必须通过 Chrome responsive mode 测试， 确保不会出现 overflow 或布局错位。
所有页面必须有 container 容器 max-width:1200px margin:auto padding:16px
推荐结构 container header main section grid card foote
| 你的规则 | 行业术语 | 说明 |
|---|---|---|
| 所有元素用 flex/grid | Modern Layout System | 现代布局系统 |
| 不使用固定宽度 | Fluid Layout | 流式布局 |
| 使用 max-width | Content Container Pattern | 内容容器模式 |
| box-sizing:border-box | Universal Box Model Reset | 盒模型重置 |
| 不能超出 viewport | Viewport Safe Layout | 视口安全布局 |
| 禁止 overflow-x | Horizontal Overflow Prevention | 防止横向滚动 |
Responsive Layout Best Practices Modern Responsive UI Architecture
| 你的说法 | 行业术语 | 说明 |
|---|---|---|
| 大屏 | Large Screen / Desktop Layout | 桌面显示器 |
| 小屏 | Mobile Layout | 手机 |
| 折叠屏 | Foldable Layout | 可折叠设备 |
| 小窗 | Windowed / Resizable Layout | 浏览器窗口缩放 |
Responsive Web Design (RWD)
过渡动画 该页面必须实现响应式布局 (Responsive Layout)。
适配以下 viewport：
Mobile: 360px - 640px Tablet: 768px - 1024px Desktop: 1280px - 1920px Large Screen: >1920px
要求：
1 使用 flex 或 grid 布局 2 不允许固定宽度 3 使用 max-width 控制容器 4 所有图片 max-width:100% 5 页面禁止 horizontal overflow 6 组件必须在小屏幕自动换行 7 在小屏幕使用单列布局 8 在大屏幕使用多列布局 9 页面必须支持浏览器窗口缩放
页面必须支持 foldable devices。
当 viewport 在 600px - 900px 之间时：
1 自动切换为双列布局 2 避免关键元素位于屏幕中央折叠区域 3 内容必须允许重新流式排列
页面必须支持 foldable devices。
当 viewport 在 600px - 900px 之间时：
1 自动切换为双列布局 2 避免关键元素位于屏幕中央折叠区域 3 内容必须允许重新流式排列
布局必须遵循 mobile-safe 和 desktop-safe 的响应式设计原则。
要求：
1 默认 viewport 为 desktop (1280px) 2 页面必须支持 mobile、tablet、desktop 3 使用 flex 或 grid 布局 4 不允许固定宽度 5 所有图片 max-width:100% 6 不允许 horizontal overflow 7 小屏幕自动单列布局 8 大屏幕自动多列布局 9 页面必须支持浏览器窗口缩放 10 代码必须通过 Chrome responsive mode
先架构，后页面；先设计系统，后组件；先计划，后改代码。
本项目必须遵循以下原则：
【架构优先】
- 先分析整体布局结构
- 先给出修改计划
- 再进行代码修改
- 禁止只修改局部组件而忽略整体布局
【布局规则】
- 使用 flex 或 grid
- 不允许固定宽度
- 必须使用 max-width 容器
- 所有元素 box-sizing: border-box
- 禁止 horizontal overflow
- 页面必须支持窗口缩放
- 小屏自动单列，大屏多列