自适应设计和断裂点

1）原则

1.内容第一：布局是根据任务和内容而不是"流行"shirin构建的。
2.移动第一：从严格的简单选项开始，随着输入宽度/功能的增长，它变得更加复杂。
3.渐进式增强：基本的UX在没有JS/动画的情况下运行；改进是按条件连接的。
4.一致性：相同的模式-所有断路器上的相同行为。
5.Performance-aware：图像、网格和脚本根据重量和复杂性进行调整。

2）断裂点（断裂点）

根据实际设备和模式变化（专栏/导航/印刷）进行选择。

推荐套件（参考）

• 只有当结构发生变化时（例如，卡片的1→2列，边栏的出现），才引入断路器。
• 组件内部允许局部休息（容器请求）。

3）容器查询vs媒体查询

当"@media"媒体查询：整个页面的布局发生变化（导航、模板）。
当容器"@container"：卡/小部件必须根据其可用宽度进行调整（组件独立于页面）。

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

使用捆绑：介质用于页面框架+组件容器。

4）印刷： fluid+步骤

结合"clamp（）"和断路器步骤。

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• 字符串的长度为45-80个字符（在36-60边栏上）。
• 大小的步骤是4/8-pt的倍数；线条平稳。

5）网格和模块

在部分级别-CSS网格（专栏，区域）；内部-Flex。
组件高度是基线的倍数（例如，40/48/56 px）。
我们有2个密度预设：Comfort （读取/dashbords）和Compact （表/pro）。

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6）图像和媒体

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

对于背景-"图像设置"和lazy-loading。
图像中的文本仅在专栏/重叠上；AA ≥对比。

7）导航和响应模式

XS/SM：bottom-nav或hamburger，著名的CTA；隐藏的搜索显示在上面。
MD：出现persistent-sidebar/mega-menu。
LG/XL：两层导航，快速过滤器，面包屑。

行为：元素不溷乱"移动"-始终是预先描述的方案之一。

8）输入： hover/touch/keyboard

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• 没有关键内容"只在乱七八糟"。
• 点击区域：≥ 44 × 44（暴民），第32 ≥ 32 ×（台式机）。
• 所有断路器都支持键盘。

9）安全区和系统切口

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10）黑暗/光明主题和对比

主题独立于breakpoint：对比目标无处不在。
在XS上，我们避免使用"酸性"重音。提高黑暗背景参考的亮度。
支持"prefers-color-scheme"和手动开关。

11）生产力

关键的CSS是inline或通过"media="print"/preload策略；JS正在延迟加载。
避免在长列表上进行重排版动画；动画"opacity/transform"。
懒惰地装载图片/小部件；skeleton而不是旋转器。
限制数十张卡片上的"沉重"阴影/过滤器。

12）设计系统令牌（示例）

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13）组件讲习班（集装箱休息）

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS：堆迭视图（左边的标签,右边的值,块）。
• SM+：水平滚动时只有多余的列,锁定帽子/第一列。
• 数字是tabular-nums，与小数对齐。

14）本地化和RTL

"dir="rtl""+"：dir（rtl）"用于镜像图标/箭头/margin-ov。
翻译可以增加20-30%的行长度-放下纸张。
对于某些抄本（例如格鲁吉亚/泰语），将基本小桶增加1 px。

15） iGaming的细节

锦标赛/奖金卡：网格3 × N（LG），2 × N（MD），1 × N（SM/XS）；CTA和条件-在永久区域。
领导者/排名：粘贴帽/第一列；XS-堆叠模式；数字是单色素的。
支付表格：XS-单价；MD-2列（字段+说明）。
负责任的通知（18+，限制，风险）：在所有断路器上总是可见的，AAA的对比，没有"隐藏在挂车中"。

16）反模式

固定块宽度代替网格/栏。
"每个像素的断裂点"：太多的媒体误差→溷乱。
节奏断裂：相邻部分不同的gutter/音高无缘无故。
无条纹图像中的关键文本。
仅在hover上可用的内容（tach无法实现）。
长列表中的布局属性动画。

17） QA支票清单

网格和容器

• 柱子和gutter对应于断路器；集装箱居中。
• 组件正确地"流动"1→2→3扬声器而不会断裂。

印刷厂

• 第45-80行的长度；fluid-kegli通过"clamp（）"。
• 文本的对比度对应于两个主题中的WCAG。

图像

[] Есть `srcset/sizes`, `aspect-ratio` и lazy-loading;没有CLS。

输入和A11y

• 键盘导航；'：focus-visible'可见。
• 替代hover on tach；集团区域≥ 44 × 44。
• "prefers-reduced-motion"得到了支持。

生产力

• 仅使用"转换/操作性"动画；严重影响是有限的。
• 关键的CSS/JS可以有效地加载。

18）设计系统中的文档

"响应与突破"：断路器，容器，扬声器和插头表。
"Container Queries"：自适应组件的示例。
"Fluid Type"："clamp（）"公式和尺度预构造。
"导航模式"：XS/SM/MD/LG/XL变体。
带有短片段和CLS/LCP值的"Do/Do n't"。

简短的摘要

适应性是一种策略，不是一组混乱的媒体问题。依靠内容和设备分析,将媒体查询与成熟的网格和容器查询相结合,将"clamp（）"应用于印刷,控制图像和性能,支持所有输入和A11y方式。因此，在任何屏幕上，接口都保持可预测，快速且同样方便。