自適應設計和斷裂點
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）圖像和媒體
使用「srcset」/「sizes」和自動密度選擇：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方式。因此，在任何屏幕上，接口都保持可預測，快速且同樣方便。