自适应卡片实验室｜视口、容器与用户偏好

Media Query 看 viewport控制页面导航、栏数与整体结构

Container Query 看 container控制卡片内部排列，不读取路由与 window.innerWidth

实验条件

7 AXES

页面 viewport 宽度只应改变页面级 Media Query 结果。

1024 px

拖动后，舞台可横向滚动以保留真实像素宽度。

ProjectCard container 宽度只应改变卡片内部 Container Query 结果。

520 px

断点：420px 进入中布局，640px 进入宽布局。

主题与对比度

浅色主题深色主题

动态效果偏好

标准动态减少动态

模拟键盘 focus-visible给“打开项目”按钮显示高对比双线焦点环。

文字放大

项目状态每种状态同时使用文字、符号和颜色。

LIVE QUERY RESULT

Media Query · 页面结果 @media (min-width: 48rem) → true 平板布局：侧栏导航 + 两列摘要

Container Query · 卡片结果 @container project-card (min-width: 26.25rem) → true 中容器：图片在左，内容与操作在右侧分行

模拟 viewport：1024px

project-space.local/workspace/projects 1024px

项目总览 TABLET · 2 COLUMNS

ProjectCard container：520px

8 名成员 · 今天 14:20 更新

活跃

当前卡片比页面内容区更宽，因此舞台出现横向滚动。真实页面通常还会用 max-width 或网格轨道约束容器。

主题对比浅色：深色文字 / 暖白背景

动态偏好允许非必要轻微位移

键盘焦点真实 Tab 可见；模拟环关闭

文字缩放100%，卡片无固定高度

状态冗余✓ + “活跃” + 颜色

每题识别最关键的职责边界；答错可继续选择，完成后可一键重置。

已完成 0 / 10 · 正确 0 0 / 10

挑战 01 / 10

Media Query页面导航、整体栏数、全屏结构

Container Query组件按实际可用空间重排

focus-visible键盘操作有清楚且高对比的落点

reduced-motion取消非必要位移，但保留状态反馈

文本 200%不使用会截断正文和按钮的固定高度

状态冗余文字 + 符号 + 颜色，不靠单一色相

mobile-first无前缀为默认，min-width 逐步增强

真实边界组件无需读取路由或 window.innerWidth