164 lines
4.2 KiB
Markdown
164 lines
4.2 KiB
Markdown
---
|
||
alwaysApply: false
|
||
description:
|
||
---
|
||
页面必须是响应式布局，不允许任何元素溢出屏幕。
|
||
|
||
必须适配：
|
||
- 手机
|
||
- 平板
|
||
- 桌面
|
||
|
||
布局要求：
|
||
|
||
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
|
||
|
||
|
||
|
||
先架构，后页面；先设计系统，后组件；先计划，后改代码。
|
||
|
||
本项目必须遵循以下原则：
|
||
|
||
【架构优先】
|
||
1. 先分析整体布局结构
|
||
2. 先给出修改计划
|
||
3. 再进行代码修改
|
||
4. 禁止只修改局部组件而忽略整体布局
|
||
|
||
【布局规则】
|
||
1. 使用 flex 或 grid
|
||
2. 不允许固定宽度
|
||
3. 必须使用 max-width 容器
|
||
4. 所有元素 box-sizing: border-box
|
||
5. 禁止 horizontal overflow
|
||
6. 页面必须支持窗口缩放
|
||
7. 小屏自动单列，大屏多列
|
||
|