OpenAI: GPT-5 Mini 在「Container Queries 布局」的评测结果
这是该 AI 模型在此测试用例上的详细评测结果。
基本信息
- 模型名称：OpenAI: GPT-5 Mini
- 用例名称：Container Queries 布局
- 测试类型：网页生成
- 评测维度：响应式布局
系统提示词（System Prompt）
这是给 AI 模型的背景设定和角色指令：
你是一名资深前端开发工程师，专注于现代 CSS 布局技术，尤其擅长 CSS Container Queries 的实践应用。 回答要求： 1. 所有代码必须整合在单一 HTML 文件中，可直接在浏览器运行，无需任何外部依赖。 2. 必须使用原生 CSS Container Queries（container-type + @container），严禁用 JavaScript 或 Window 级别的 Media Queries 替代容器查询逻辑。 3. 每个演示组件的父容器必须显式声明 container-type: inline-size，@container 规则才能生效。 4. 代码结构清晰，CSS 注释需标注各断点的触发条件，便于阅读和理解。 5. 滑块控件必须通过 JavaScript 实时修改容器宽度，并同步显示当前宽度数值，让布局变化直观可见。
用户提示词（User Prompt）
这是用户给 AI 模型的具体任务要求：
# CSS Container Queries 基础演示页面 请生成一个完整的单文件 HTML 页面，通过可拖动滑块实时演示 CSS Container Queries 的核心用法。 ## 功能要求 ### 演示组件（共 3 个） **1. 产品卡片组件** 根据容器宽度呈现三种布局： - 容器宽度 < 200px：极简模式，仅显示商品图片（用色块占位）和价格 - 容器宽度 200px ~ 400px：垂直布局，图片在上，商品名称 + 描述 + 价格在下 - 容器宽度 > 400px：水平布局，图片在左，文字信息在右 **2. 用户信息组件** 根据容器宽度呈现三种布局： - 窄容器（< 200px）：仅显示圆形头像（色块占位）+ 用户名 - 中容器（200px ~ 400px）：头像 + 用户名 + 职位标签 - 宽容器（> 400px）：完整信息卡片，包含头像、用户名、职位、简介文字和联系按钮 **3. 统计数据组件** 根据容器宽度呈现三种布局： - 窄容器（< 200px）：仅显示大号数字 - 中容器（200px ~ 400px）：数字 + 指标标签（如「月销售额」） - 宽容器（> 400px）：数字 + 标签 + 用 CSS 绘制的简易趋势条形图 ### 交互控件 - 页面顶部放置一个范围滑块（range input），范围 100px ~ 600px，默认值 300px - 滑块旁实时显示当前容器宽度数值（如「当前宽度：300px」） - 拖动滑块时，三个演示组件的父容器宽度同步变化，组件布局随之切换 ## 技术规范
评测结果
综合得分
该模型在此用例的得分为：93.4 分（满分 100 分），已通过
基础难度评测结果
- 得分：93.4 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
以下是一个可直接在浏览器打开的单文件 HTML 示例，展示了使用原生 CSS Container Queries 的三种演示组件（产品卡片、用户信息、统计数据），并通过页面顶部的滑块实时调整每个组件父容器的宽度（范围 100px–600px，默认 300px）。所有容器都显式声明了 container-type: inline-size，样式断点完全通过 @container 实现，未使用 window 媒体查询替代。 将下面内容复制为一个 .html 文件并在浏览器中打开即可运行： ```html CSS Container Queries 基础演示 /* 全局基础样式 */ :root{ --panel-bg: #ffffff; --muted: #6b7280; --accent: #2563eb; --card-radius: 10px; --gap: 12px; --shadow: 0 6px 18px rgba(15,23,42,0.08); } body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,#f3f4f6,#eef2ff 60%); margin: 0; padding: 28px; color: #0f172a; } h1{ margin: 0 0 6px 0; font-size: 20px; } p.lead{ margin: 0 0 18px 0; color: var(--muted); font-size: 13px; } /* 控件区 */ .controls{ display:flex; align-items:center; gap: 12px; margin-bottom: 18px; flex-wrap:wrap; } .controls .label{ font-size:13px; color:var(--muted); min-width:120px; } .controls .range-wrap{ display:flex; align-items:center; gap:12px; flex: 1; min-width:220px; } input[type="range"]{ -webkit-appearance:none; appearance:none; height:6px; background:#e6e9ef; border-radius:999px; outline:none; width:100%; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px;height:18px;border-radius:50%; background:var(--accent);box-shadow:0 2px 6px rgba(37,99,235,0.32); } /* 演示区主体布局 */ main{ display:flex; gap:18px; align-items:start; flex-wrap:wrap; } /* 每个演示组件的外部父容器（显式声明 container-type: inline-size） */ .panel{ background:var(--panel-bg); border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 14px; box-sizing: border-box; /* 关键：将此元素声明为容器，启用 inline-size 查询 */ container-type: inline-size; /* 视觉上的最小高度和布局 */ min-height: 120px; /* initial width will be controlled by JS slider; provide a fallback */ width: 300px; transition: width 160ms linear; flex-shrink: 0; } .panel-title{ font-weight:600; font-size:13px; margin:0 0 8px 0; } .panel-sub{ font-size:12px;color:var(--muted);margin:0 0 10px 0; } .w-badge{...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该实现高质量地完成了CSS Container Queries基础演示页面的所有核心需求。三个演示组件均正确使用了container-type: inline-size和@container规则，断点设置与需求完全一致，JavaScript仅用于控制容器宽度和显示数值，布局逻辑完全由CSS驱动。页面UI设计精美，代码结构清晰，注释详细。是一个可直接在浏览器运行的高质量单文件HTML演示页面。 【GEMINI】这是一份高质量的实现方案。模型不仅精准遵循了所有技术约束（如原生容器查询、单文件结构、JS 仅负责宽度控制），还在 UI 细节上表现出色，代码结构清晰易读，是 CSS Container Queries 应用的典范示例。 【KIMI】这是一个高质量的CSS Container Queries演示实现，完全满足任务的所有技术要求。代码结构清晰，注释详尽，既展示了容器查询的核心能力，又提供了直观的交互体验。三个组件的断点设计合理，布局切换流畅，是学习和教学容器查询技术的优秀范例。建议在后续优化中考虑添加当前布局模式的视觉指示器，以及使用更现代化的容器查询语法范围表示法。
进阶难度评测结果
- 得分：85.5 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
CSS Container Queries 交互演示（进阶版） /* ========================= CSS 变量：颜色 / 间距 / 动画 ========================= */ :root{ --bg: #0f1724; --card: #0b1220; --muted: #98a0b3; --accent: #4fd1c5; --accent-2: #60a5fa; --glass: rgba(255,255,255,0.04); --gap: 16px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --radius: 12px; --transition-fast: 220ms cubic-bezier(.2,.9,.2,1); --transition-medium: 360ms cubic-bezier(.2,.9,.2,1); } /* 页面基础布局（使用 CSS Grid） */ html,body{ height:100%; margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#071021 0%,#081226 40%), var(--bg); color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Root page container is itself a container so we can use container queries instead of window media queries. This also satisfies requirement 3 for a container-type declaration (page-level). */ .page{ max-width:1200px; margin:28px auto; padding:24px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); display:grid; grid-template-columns: 1fr; gap:var(--space-lg); container-type: inline-size; /* Page-level container for global breakpoint control via @container */ } header{ display:flex; gap:16px; align-items:center; justify-content:space-between; } header .title{ display:flex; gap:12px; align-items:center; } .logo{ width:48px;height:48px;border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex;align-items:center;justify-content:center;font-weight:700;color:#04202b; box-shadow: 0 6px 20px rgba(64, 196, 184, 0.08); } h1{ font-size:18px; margin:0; letter-spacing:0.2px; } p.lead{ margin:0; color:var(--muted); font-size:13px; } /* Controls area (slider) */ .controls{ display:flex; gap:16px; align-items:center; padding:12px; border-radius:10px; background:...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该实现整体质量较高，代码结构清晰，CSS 变量规范，视觉设计精良，Container Queries 的核心语法（container-type: inline-size + @container）使用正确，三个演示组件各有侧重（Profile 的 flex-direction 切换、Products 的 grid-template-columns 切换、Toolbar 的按钮排列切换）。主要技术隐患在于：.page 容器同时作为页面布局容器和 container，导致 demo-grid 的列数响应受 .page 宽度而非 demo-frame 宽度控制，削弱了「通过滑块观察容器响应」的演示效果；大屏断点（>1200px）因 .page max-width 限制实际无法触发；demo-frame 在小屏下可能溢出。若将 demo-grid 的 @container 规则绑定到 demo-frame 容器（通过 container-name 区分），并添加实时断点指示器，演示效果将更为准确和直观。 【GEMINI】这是一份高质量的实现方案。模型不仅严格遵守了「不得使用 Window 级别 Media Queries」的限制，还通过嵌套容器查询展示了复杂的响应式逻辑。代码整洁，动画流畅，交互设计考虑周全，完美契合资深前端工程师的技术设定。 【KIMI】该实现是一个高质量的 CSS Container Queries 演示页面，完整展示了三种典型组件基于容器尺寸的响应式布局变化。代码结构清晰，CSS 变量管理规范，动画过渡平滑，交互设计直观。主要优点在于严格遵守了 container-type + @container 的技术要求，避免了使用 Media Queries 处理组件级响应式逻辑。主要改进空间在于：页面级响应式与组件级响应式的职责划分可以更加明确，部分冗余的 container query 规则可以合并，以及演示交互的便捷性可以进一步提升（如添加预设尺寸按钮）。整体而言，这是一个技术正确、演示效果良好的实现。
困难难度评测结果
- 得分：79.2 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
CSS Container Queries 高级演示 :root{ --demo-min:80; --demo-max:700; /* Typographic tokens (will be referenced by components via container query units) */ --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --radius: 12px; --accent: #2563eb; --muted: #6b7280; --card-bg: #ffffff; --surface: #f8fafc; --danger: #ef4444; /* Slider colors */ --mark-color: rgba(0,0,0,0.12); --active-color: rgba(37,99,235,0.12); --accent-solid: #2563eb; } /* Basic page layout */ html,body{height:100%;background:linear-gradient(180deg,#f8fafc, #f1f5f9);font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0;color:#0f172a} .page { max-width:1200px; margin:28px auto; padding:20px; display:flex; gap:20px; flex-wrap:wrap; /* On narrow screens the demo zones will wrap/stack */ align-items:flex-start; } .header { width:100%; margin-bottom:8px; } .title { font-size:18px;font-weight:700;color:var(--accent-solid); } .subtitle { font-size:13px;color:var(--muted);margin-top:6px } /* Demo zone container */ .demo-zone { background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid rgba(15,23,42,0.06); box-shadow: 0 6px 18px rgba(2,6,23,0.04); border-radius:14px; padding:14px; flex: 1 1 520px; /* try to keep them side-by-side on wide screens, stack if narrow */ min-width:320px; display:flex; flex-direction:column; gap:12px; } .demo-zone-header { display:flex; align-items:center; gap:12px; justify-content:space-between; } .controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } /* Slider UI */ .slider-wrap { display:flex; gap:12px; align-items:center; } .slider { display:flex; align-items:center; gap:8px; } input[type=range]{ -webkit-appearance:none; width:240px; height:10px; background: transparent; } input[type=range]::-webkit-slider-runnable-track{ height:10px; background:transparent; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px;height:18px;border-radius:50%;...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该实现整体方向正确，三种组件均使用了具名 Container Queries 并实现了三阶段布局，Container Query Units（cqw/cqi）和 clamp() 流体排版有所应用，双演示区域独立滑块控制的核心需求基本达成。主要问题集中在：滑块断点标记线的 DOM 结构设计导致视觉对齐失效；UserProfile 使用 container-type:size 存在潜在问题；嵌套 @container 语法兼容性存疑；CSS 排版 token 系统不够完整；display:none 切换导致 transition 动画效果受限。整体属于「功能基本可用但细节有明显瑕疵」的水平，达到中等偏上的实现质量。 【GEMINI】这是一份非常优秀的高级前端演示代码。它不仅完美契合了所有技术约束（Container Queries、Units、Fluid Typography），还在用户体验和视觉细节上做了大量优化，如滑块的断点可视化和统计数字的缓动动画，充分展示了现代 CSS 布局的强大能力。 【KIMI】该实现是一份高质量的Container Queries技术演示，完整覆盖了所有硬性要求：具名容器、三阶段响应式布局、cqw/cqi流体单位、双区域独立响应、滑块控制系统、极端边界降级。代码结构专业，视觉设计精致，动画流畅。技术实现上仅有minor的优化空间（如size与inline-size的选择、嵌套@container的兼容性考量），但不影响整体正确性。作为教学演示和工程参考均具有很高价值。
相关链接
您可以通过以下链接查看更多相关内容：
