GLM-5.1 在「Container Queries 布局」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：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」） - 拖动滑块时，三个演示组件的父容器宽度同步变化，组件布局随之切换 ## 技术规范

评测结果

综合得分

该模型在此用例的得分为：91.19 分（满分 100 分），已通过

基础难度评测结果

  • 得分：91.19 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html CSS Container Queries 实时演示 /* ========== 设计令牌 ========== */ :root { --bg: #0e0f13; --bg-elevated: #16171d; --card: #1c1d25; --card-hover: #22232d; --border: #2a2b36; --fg: #e8e6e1; --fg-muted: #8a8994; --accent: #e8a838; --accent-dim: rgba(232, 168, 56, 0.12); --accent-glow: rgba(232, 168, 56, 0.25); --success: #34d399; --danger: #f87171; --radius: 12px; --radius-sm: 8px; --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== 全局重置 ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; line-height: 1.6; } /* ========== 背景氛围层 ========== */ body::before { content: ''; position: fixed; top: -30%; left: -10%; width: 60%; height: 60%; background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: drift 20s ease-in-out infinite alternate; } body::after { content: ''; position: fixed; bottom: -20%; right: -15%; width: 50%; height: 50%; background: radial-gradient(ellipse, rgba(52, 211, 153, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: drift 25s ease-in-out infinite alternate-reverse; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 30px) scale(1.1); } } /* ========== 页面布局 ========== */ .page-wrapper { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; } /* ========== 页面标题区 ========== */ .page-header { text-align: center; margin-bottom: 48px; } .page-header h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; background: linear-gradient(135deg, var(--fg) 40%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; } .page-header p { color: var(--fg-muted); font-size: 15px;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的 CSS Container Queries 演示实现。代码严格遵循技术规范，三个组件的渐进式布局切换逻辑清晰，完整展示了容器查询相对于视口查询的优势。UI 设计专业精致，交互流畅自然，断点指示器等辅助元素增强了演示的教学价值。代码注释详尽，结构组织良好，可直接作为 Container Queries 学习的标准范例。整体实现超出基本需求，在功能完整性、技术正确性和视觉呈现三方面均表现优秀。 【KIMI】整体而言，该实现在功能实现和技术规范正确性方面表现良好，UI 与交互体验也达到了较高的质量。代码结构清晰，注释详细，易于理解和维护。虽然在 UI 设计上还有改进空间，但已经很好地满足了题目要求，是一个优秀的响应式布局演示页面。

进阶难度评测结果

  • 得分：91.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html CSS Container Queries 交互演示 /* ========================================= 1. CSS 变量与基础重置 ========================================= */ :root { /* 颜色系统 */ --bg-color: #0f172a; --surface-color: #1e293b; --surface-hover: #334155; --primary-color: #38bdf8; --primary-glow: rgba(56, 189, 248, 0.2); --accent-color: #f472b6; --text-color: #f1f5f9; --text-muted: #94a3b8; --border-color: #475569; /* 间距系统 */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; /* 圆角与动画 */ --border-radius: 12px; --transition-speed: 0.4s; --transition-fn: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.5; min-height: 100vh; } /* ========================================= 2. 页面整体布局 (CSS Grid + Media Queries) 支持四个断点：手机(1200px) ========================================= */ .page-wrapper { display: grid; gap: var(--spacing-lg); padding: var(--spacing-md); max-width: 1400px; margin: 0 auto; grid-template-areas: "header" "controls" "demo1" "demo2" "demo3"; } /* 平板断点: 480px - 768px */ @media (min-width: 480px) { .page-wrapper { grid-template-areas: "header header" "controls controls" "demo1 demo2" "demo3 demo3"; grid-template-columns: 1fr 1fr; } } /* 桌面断点: 768px - 1200px */ @media (min-width: 768px) { .page-wrapper { grid-template-areas: "header header header" "controls controls controls" "demo1 demo2 demo3"; grid-template-columns: 1fr 1fr 1fr; padding: var(--spacing-xl); } } /* 大屏断点: > 1200px */ @media (min-width: 1200px) { .page-wrapper { padding: var(--spacing-xl) 0; } } .page-header { grid-area: header; } .global-controls { grid-area: controls; } .demo-module-1 { grid-area: demo1; } .demo-module-2 { grid-area: demo2; } .demo-module-3 { grid-area: demo3; } /* ========================================= 3. 通用...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的 Container Queries 演示实现，完全满足技术要求且代码规范。核心亮点包括：严格遵守 Container Queries 语法规范，三个组件的响应式逻辑设计合理且断点阈值恰当；CSS Grid 和 Flexbox 结合使用实现复杂布局；过渡动画覆盖全面且参数统一；CSS 变量管理规范，代码可维护性强。细节处理到位，如使用「min()」函数防止容器溢出、滑块 thumb 的 hover 缩放效果等。建议改进方向：增强极小屏幕下的适配、补充无障碍属性、优化部分 CSS 过渡属性的兼容性。整体而言，该实现可作为 Container Queries 技术的优秀教学案例。 【GEMINI】这是一份高质量的实现。不仅技术上严格遵守了 Container Queries 的规范，而且在页面美学、交互设计和响应式布局的细节处理上都表现优异。代码注释详尽，结构标准，是一个非常好的进阶版交互演示页面。 【KIMI】该实现是一个高质量的 CSS Container Queries 演示页面，核心语法使用正确，三个组件展示了不同场景下的容器查询应用，交互功能完整。代码结构清晰，注释充分，CSS 变量系统规范。主要改进点在于：精确处理 flex gap 的计算、优化小容器尺寸下的内边距策略、以及增强大屏断点的布局差异化。整体达到生产可用水平，作为教学演示尤为出色。

困难难度评测结果

  • 得分：91.25 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html CSS Container Queries 高级演示 /* ========== 设计Token ========== */ :root { --bg: #0b0d14; --bg-elevated: #11141e; --card: #171b2b; --card-hover: #1c2137; --fg: #e6e4e0; --fg-dim: #a0a3b5; --fg-muted: #6b6f87; --accent-a: #f59e0b; --accent-a-dim: rgba(245,158,11,0.10); --accent-a-border: rgba(245,158,11,0.22); --accent-b: #06d6a0; --accent-b-dim: rgba(6,214,160,0.10); --accent-b-border: rgba(6,214,160,0.22); --accent-c: #f43f5e; --accent-c-dim: rgba(244,63,94,0.10); --accent-c-border: rgba(244,63,94,0.22); --border: #22263a; --border-light: #2e3350; --radius: 12px; --radius-sm: 8px; --ease: cubic-bezier(0.4,0,0.2,1); --dur: 0.4s; --tr: var(--dur) var(--ease); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* 背景氛围 */ body::before { content:''; position:fixed; top:-180px;left:50%; transform:translateX(-50%); width:900px;height:500px; background:radial-gradient(ellipse,rgba(245,158,11,0.045) 0%,transparent 55%); pointer-events:none;z-index:0; } body::after { content:''; position:fixed; bottom:-200px;right:-100px; width:700px;height:500px; background:radial-gradient(ellipse,rgba(6,214,160,0.035) 0%,transparent 55%); pointer-events:none;z-index:0; } /* ========== 页面头部 ========== */ .page-header { text-align:center; padding:52px 24px 36px; position:relative;z-index:1; } .page-title { font-size:clamp(1.9rem,4.5vw,3rem); font-weight:900; letter-spacing:-0.04em; line-height:1.15; margin-bottom:14px; } .page-title .hl { background:linear-gradient(135deg,var(--accent-a) 0%,#fbbf24 45%,var(--accent-b) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .page-subtitle { color:var(--fg-dim); font-size:clamp(0.88rem,1.4vw,1.05rem); max-width:660px; margin:0 auto; line-height:1.75; }...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个技术实现极为扎实的 CSS Container Queries 高级演示页面。核心亮点包括：（1）严格遵循规范使用具名容器与 @container 规则，三组件各有三阶段精确断点切换；（2）大量运用 cqw/cqi 单位与 clamp() 实现真正的流体排版，字体/间距随容器连续缩放；（3）双演示区域独立控制成功验证容器查询的隔离特性；（4）滑块控制系统功能完备（断点标记、区间高亮、实时数值），交互体验流畅；（5）边界处理周全（<100px 降级规则），代码结构清晰且高度可维护。技术正确性接近满分（98 分），功能完整性优秀（95 分），UI 质量与代码质量均在 92-94 分区间。极少数改进空间包括：可进一步展示深层嵌套容器场景、优化极端窄宽下的视觉细节、将更多魔法数字提取为 CSS 变量。整体而言，该实现完全满足 Hard 级别要求，是 Container Queries 技术的优秀示范案例。 【KIMI】整体而言，该实现在功能完整性、技术规范性、界面质量和代码质量方面表现良好，符合高级CSS Container Queries演示页面的要求。虽然在界面质量和代码质量方面有改进空间，但整体上是一个高质量的实现。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%