SYNCROBOTIC

FOUNDATIONS > Breakpoints

Breakpoints

SyncAI 的佈局邏輯優先確保專業生產力環境的完整體驗，定義了四個核心空間閾值，規範介面如何從寬闊的專業視圖，優雅地轉化為緊湊的移動視圖。

Content Reflow Logic 佈局邏輯

垂直堆疊

在寬度 < 768px 時，所有網格元件預設為單欄流體佈局，確保內容的可讀性。

水平擴展

當進入中大型螢幕時，利用 12 欄網格系統進行水平排列，最大化空間利用。

導航欄適應性

側邊欄在 MD 以下轉為抽屜模式 (Drawer)，在 LG 以上保持固定 (Static)。

Breakpoint Scale Table 斷點規範表

TokenWidthColumnsGutter
BK-Wide1440px12 Columns40px
BK-Desktop1200px12 Columns32px
BK-Tablet768px8 Columns24px
BK-Mobile滿版 (100%)4 Columns16px
Implementation Guide
CSS VariablesTailwind Config
:root {
  /* 斷點設定 (Breakpoints) */
  --bk-mobile: 767px;
  --bk-tablet: 768px;
  --bk-desktop: 1200px;
  --bk-wide: 1440px;

  /* 間距邏輯 (Spacing Logic) */
  --grid-gutter-mobile: 16px;
  --grid-gutter-tablet: 24px;
  --grid-gutter-desktop: 32px;
  --grid-gutter-wide: 40px;
}
v2.4.0 • Easing Tokens
Copy Code