適応設計と骨折点

1）原則

1.Content-first：レイアウトは「人気のある」幅ではなく、タスクとコンテンツから構築されます。
2.モバイルファースト：私たちは厳格なシンプルなオプションから始め、幅/入力機能が大きくなるにつれてより複雑になります。
3.プログレッシブな強化：基本的なUXはJS/アニメーションなしで動作します。改善は条件に従って接続されます。
4.一貫性：同じパターン-すべてのブレークポイントで同じ動作。
5.パフォーマンスに配慮：イメージ、グリッド、およびスクリプトは、重量と複雑さに適応します。

2）破壊ポイント（ブレークポイント）

実際のデバイスのデータに応じて、パターン（列/ナビゲーション/タイポグラフィ）を変更して選択します。

推奨セット（参照点）

• 構造を変更するときにのみブレークポイントを入力します（例：1→2カードの列、サイドバーの外観）。
• コンポーネント内のローカルブレイク（コンテナリクエスト）が許可されます。

3）コンテナ要求とメディア要求

メディアクエリ'@media'：ページ全体のレイアウト（ナビゲーション、テンプレート）を変更します。
コンテナ'@container'の場合：カード/ウィジェットは使用可能な幅に調整する必要があります（コンポーネントはページから独立しています）。

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

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

コンポーネントのページフレーム+コンテナにメディアを使用します。

4）タイポグラフィ： 流体+ステップ

'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の倍数です。line-heightはブレークポイントで安定です。

5）格子およびモジュール

セクションレベルで-CSSグリッド（列、エリア）；内部-フレックス。
コンポーネントハイトはベースラインの倍数です（例：40/48/56 px）。
私たちは2密度プリセットを持っています：快適さ（読書/ダッシュボード）とコンパクト（テーブル/プロ）。

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; }

背景の場合-'image-set（）'とlazy-loading。
画像のテキスト-プレート/オーバーレイのみ。AA ≥対照。

7）ナビゲーションとレスポンシブパターン

XS/SM：ボトムナビまたはハンバーガー、注目すべきCTA；隠された検索は上に展開します。
MD： persistent-sidebar/megaメニューが表示されます。
LG/XL：ナビゲーション、クイックフィルター、パン粉の2つのレベル。

挙動：要素はランダムに「移動」しません-常に以前に説明したスキームの1つです。

8）入力： ホバー/タッチ/キーボード

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）暗い/軽い主題および対照

トピックはブレークポイントから独立しています。コントラストの目標はどこでも同じです。
XSでは、「酸」アクセントを避けてください。暗い背景のリンクの明るさを高めて下さい。
'prefers-color-scheme'および手動スイッチのサポート。

11）パフォーマンス

Critical CSS-インラインまたは'media=「print 」/preload strategy；JSの負荷が遅れる。
長いリストのレイアウト重いアニメーションを避けます。'不透明度/変換'をアニメーション化します。
画像/ウィジェットの遅延ロード；スピナーの代わりにスケルトン。
数十枚のカードに「重い」影/フィルタを制限します。

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： stacked-view（左のラベル、右の値、ブロック）。
• SM+：過剰な列でのみ水平スクロールし、キャップ/最初の列を修正します。
• 数字-表形式、小数点の配置。

14）ローカライズとRTL

'dir=「rtl」'+'：dir （rtl）'アイコン/矢印/余白をミラーします。
翻訳はラインの長さを20-30％増加させることができます-在庫を置きます。
いくつかの文献（例えば、グルジア語/タイ語）では、ベースサイズを1 px増加させます。

15） iGamingの詳細

トーナメント/ボーナスカード：グリッド3 × N （LG）、 2 × N （MD）、 1 × N （SM/XS）；CTAと条件-永久的な領域で。
リーダー/評価：粘着性がある帽子/最初のコラム；XS-スタックモード。数字はモノスペーシングです。
支払いフォーム：XS-シングルコラム；MD-2列（フィールド+説明）。
責任ある通知（18+、制限、リスク）：すべてのブレークポイント、AAAコントラストで常に表示されます。

16）アンチパターン

グリッド/カラムの代わりにブロック幅を修正しました。
「ピクセルあたりのブレイクポイント」：メディアリクエストが多すぎる→カオス。
壊れたリズム：理由なく隣接するセクションで異なる溝/ピッチ。
ダイのない画像のクリティカルテキスト。
ホバーでのみ利用可能なコンテンツ（タッチ不可）。
長いリストのレイアウトプロパティのアニメーション。

17） QAチェックリスト

メッシュとコンテナ

• 列と溝はブレークポイントに対応します。コンテナが中心です。
• コンポーネントは正しく「フロー」1→2→3カラムを壊さずに。

タイポグラフィックス

• ライン長さ45-80；'clamp（）'を通じた流体ピン。
• テキストコントラストは両方のテーマのWCAGにマッチします。

［イメージ］

• Есть 'srcset/sizes'、 'aspect-ratio'の遅延ロード；CLSはありません。

入力とA11y

• キーボードナビゲーション；'：focus-visible'が表示されます。
• 接触に代わるホバー；エリア≥ 44 × 44をクリックします。
• 'prefers-reduced-motion'をサポート。

パフォーマンス

• 'transform/opacity'のみがアニメーション化されます。深刻な影響は限られています。
• 重要なCSS/JSは効率的にロードされます。

18）設計システムにおけるドキュメンテーション

「レスポンシブ&ブレークポイント」：ブレークポイント、コンテナ、列、溝のテーブル。
コンテナクエリ：アダプティブコンポーネントの例。
「流体タイプ」：'clamp（）'数式とスケールプリセット。
「ナビゲーションパターン」：XS/SM/MD/LG/XLバリアント。
短いクリップとCLS/LCP値を持つ「Do/Don 't」。

簡単な要約

適応性は、混沌としたメディアクエリの集合ではなく、戦略です。コンテンツとデバイスの分析に頼り、メディアクエリと成熟したグリッドとコンテナクエリを組み合わせ、タイポグラフィに'clamp（）'を使用し、画像とパフォーマンスを制御し、すべての入力とA11y方法をサポートします。従ってインターフェイスはあらゆるスクリーンで予測可能、速くそして均等に便利残る。