Qwen: Qwen3.5-9B 在「Container Queries 布局」的评测结果

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

基本信息

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

评测结果

综合得分

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

基础难度评测结果

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

模型生成产物

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

```html CSS Container Queries 基础演示 /* ========================================= 全局样式与变量定义 ========================================= */ :root { --primary-color: #3b82f6; --bg-color: #f3f4f6; --card-bg: #ffffff; --text-main: #1f2937; --text-sub: #6b7280; --border-color: #e5e7eb; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 容器查询变量：用于在 JS 中读取宽度（可选，主要用于调试） */ --cq-width: 300px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); padding: 20px; line-height: 1.5; } /* ========================================= 顶部控制区样式 ========================================= */ .controls { max-width: 1200px; margin: 0 auto 40px; background: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .control-group { display: flex; align-items: center; gap: 15px; } .control-label { font-weight: 600; color: var(--text-main); } input[type="range"] { width: 300px; cursor: pointer; } .width-display { font-family: monospace; font-size: 1.1em; color: var(--primary-color); font-weight: bold; background: #eff6ff; padding: 4px 12px; border-radius: 6px; } /* ========================================= 容器查询核心样式 ========================================= */ /* 1. 定义容器类型 */ .cq-container { container-type: inline-size; /* 关键：声明这是一个容器 */ background-color: var(--card-bg); border-radius: 12px; padding: 24px; margin-bottom: 30px; box-shadow: var(--shadow); border: 1px solid var(--border-color); transition: all 0.3s ease; overflow: hidden; /* 防止内容溢出 */ } /* 通用标题样式 */ .cq-title { font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; color: var(--text-sub); margin-bottom: 16px; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; font-weight: 700; } /* 占位图通用样式 */ .img-placeholder {...

AI 评审点评

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

【CLAUDE】该代码整体质量较高，完整实现了题目要求的三个Container Queries演示组件和交互控件，技术规范使用正确，UI设计美观统一。主要不足在于部分断点边界值处理不够严谨（200px处的双端命中问题），以及样式定义中存在少量冗余（opacity:0与display:none混用）。作为一个基础演示页面，功能完整性和代码可读性均表现良好，适合作为Container Queries的入门演示。 【GEMINI】这是一份高质量的响应式组件演示代码。模型不仅完美满足了所有功能和技术约束，代码的可读性和 UI 设计也表现出色，是 CSS Container Queries 实践应用的优秀范例。 【KIMI】该实现是一个高质量的CSS Container Queries演示页面，完整满足了所有功能需求和技术规范。代码结构清晰、注释详尽，可直接在浏览器运行无需外部依赖。三个组件的响应式逻辑实现正确，滑块交互流畅，是学习和演示Container Queries用法的优秀范例。minor issues不影响核心功能，整体表现优秀。

进阶难度评测结果

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

模型生成产物

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

```html CSS Container Queries 进阶演示 /* ========================================= 1. CSS 变量与基础重置 ========================================= */ :root { /* 颜色系统 */ --c-bg-body: #f4f6f8; --c-bg-card: #ffffff; --c-primary: #3b82f6; --c-text-main: #1f2937; --c-text-sub: #6b7280; --c-border: #e5e7eb; --c-accent: #10b981; /* 布局间距 */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; /* 断点阈值 (用于 @container) */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1200px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--c-bg-body); color: var(--c-text-main); line-height: 1.5; padding: var(--space-md); } /* ========================================= 2. 页面主布局 (CSS Grid) ========================================= */ .page-wrapper { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } header { grid-column: 1 / -1; background: var(--c-bg-card); padding: var(--space-md); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } h1 { font-size: 1.5rem; } /* 控制面板区域 */ .controls { background: var(--c-bg-card); padding: var(--space-md); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; width: 100%; } .slider-container { width: 100%; display: flex; align-items: center; gap: var(--space-sm); } input[type="range"] { flex-grow: 1; cursor: pointer; } .width-display { font-variant-numeric: tabular-nums; font-weight: bold; color: var(--c-primary); min-width: 80px; text-align: right; } /* ========================================= 3. 组件演示区域 (CSS Grid) ========================================= */ .demo-grid { display: grid; grid-template-columns: repeat(auto-fit,...

AI 评审点评

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

【CLAUDE】整体而言，该实现完成度良好，正确运用了 Container Queries 核心语法（container-type: inline-size + @container），三个组件的布局切换逻辑清晰，CSS 变量管理规范，代码组织有条理。主要不足在于：容器宽度与父卡片宽度的约束冲突导致演示效果不完整；过渡动画对 grid-template-columns 和 flex-direction 等不可插值属性无效；缺少窗口级四断点的显式 Media Query；以及一些 JS 逻辑（resize 同步）存在设计问题。若修复容器溢出问题并添加真正可感知的过渡效果，整体质量会有较大提升。 【GEMINI】该模型出色地完成了任务，不仅严格遵守了 Container Queries 的技术规范，还通过交互式演示直观地展示了现代 CSS 布局的强大能力。代码组织逻辑严密，注释清晰，完全符合资深前端工程师的交付标准。 【KIMI】该实现整体质量较高，核心 Container Queries 技术运用正确，三种组件演示覆盖了 Grid、Flexbox 及混合布局场景，代码结构清晰、注释完善。主要扣分点在于：断点设置与需求描述不完全一致（768px 断点未在全部组件中体现）、Grid/Flex 属性过渡的浏览器兼容性限制、以及演示交互设计（全局滑块、resize 同步）对用户体验的潜在干扰。作为教学演示页面，若能增加单个容器独立控制、当前断点状态显示等功能，体验会更佳。

困难难度评测结果

  • 得分：57.0 分
  • 通过状态：未通过

模型生成产物

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

```html CSS Container Queries 高级演示 /* * ========================================== * 1. CSS Variables & Reset * ========================================== */ :root { --primary: #3b82f6; --primary-dark: #2563eb; --secondary: #10b981; --bg-color: #f8fafc; --surface: #ffffff; --text-main: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); /* Typography Tokens */ --font-sm: clamp(0.8cqw, 0.75rem, 1rem); --font-md: clamp(1.2cqw, 1rem, 1.25rem); --font-lg: clamp(1.5cqw, 1.25rem, 1.5rem); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); padding: 2rem; line-height: 1.5; } h1 { text-align: center; margin-bottom: 3rem; color: var(--text-main); } h2 { font-size: 1.2rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; } /* * ========================================== * 2. Layout & Controls * ========================================== */ .container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 900px) { .container { grid-template-columns: 1fr; } } .demo-zone { background: var(--surface); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.5rem; } /* Control Panel Styles */ .control-panel { background: #f1f5f9; padding: 1rem; border-radius: 8px; display: flex; flex-direction: column; gap: 0.75rem; } .slider-group { display: flex; align-items: center; gap: 1rem; } input[type="range"] { flex: 1; cursor: pointer; accent-color: var(--primary); } .width-display { font-family: monospace; font-weight: bold; color: var(--primary); min-width: 60px; text-align: right; } /* Breakpoint Markers */ .breakpoint-markers { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color:...

AI 评审点评

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

【CLAUDE】该代码在技术方向上有一定的Container Queries实践基础，能够识别并使用container-type、container-name、@container语法，也引入了cqw、cqi等容器查询单位。然而代码存在多个严重缺陷使其几乎无法运行：最关键的是JavaScript逻辑完全缺失，导致滑块控制、宽度联动、计数动画、断点高亮等所有交互功能无法实现；Demo Zone B完全缺失，核心的「独立响应演示」无从体现；product-title中填充了几万字的重复内容（「流体流体...」），严重破坏UI且表明输出生成出现了严重异常；clamp()与cqw的混用语法存在规范错误；多个container query断点缺少上限约束导致级联问题。总体而言，这是一个思路有一定基础但实现严重不完整、存在多处技术错误的代码，实际可用性极低。 【GEMINI】该模型出色地完成了 Container Queries 的高级演示任务，代码规范性极高，能够很好地展示容器查询的独立性与流体排版能力。主要扣分点在于统计组件的 SVG 趋势图实现较为简单，以及部分交互细节的精致度。 【KIMI】该候选输出在 CSS Container Queries 的核心技术应用上基本正确，实现了三种组件的三阶段响应式布局和双演示区域架构。但存在严重的代码完整性问题：Product Card 的 CSS 代码被大量无意义的「流体」文本截断，导致关键样式丢失；JavaScript 交互逻辑未完整展示。界面设计和视觉层次较为完善，但动态交互细节（如断点高亮更新）实现不完整。代码质量因生成错误和冗余内容受到严重影响，需大幅修复才能达到生产可用标准。

相关链接

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

加载中...
100%