--- 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. 小屏自动单列，大屏多列