적응 형 디자인 및 골절 점

1) 원칙

1. 콘텐츠 우선: 레이아웃은 "인기있는" 너비가 아닌 작업 및 컨텐츠로 작성됩니다.
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) 타이포그래피: 유체 + 단계

'클램프 ()' 와 중단 점 단계를 결합하십시오.

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).
컴포트 (읽기/대시 보드) 와 컴팩트 (테이블/프로) 의 두 가지 밀도 사전 설정이 있습니다.

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="Описание">

CLS를 피하기 위해 비율을 수정하십시오

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

배경- '이미지 설정 ()' 및 게으른 로딩.
이미지의 텍스트-플레이트/오버레이 만; 대비 AA.

7) 탐색 및 응답 패턴

XS/SM: 바닥 내비게이션 또는 햄버거, 주목할만한 CTA; 숨겨진 검색이 맨 위로 확장됩니다.
MD: 영구 사이드 바/메가 메뉴가 나타납니다.
LG/XL: 두 가지 수준의 내비게이션, 빠른 필터, 빵 부스러기.

동작: 요소는 무작위로 "이동" 하지 않습니다. 항상 이전에 설명한 체계 중 하나입니다.

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에서는 "산" 악센트를 피하십시오. 어두운 배경에서 링크의 가벼움을 증가시킵니다.
'선호하는 색 구성표' 및 수동 스위치를 지원합니다.

11) 성능

중요한 CSS-인라인 또는 'media = "print" '/preload 전략을 통해; 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: 쌓인 뷰 (왼쪽의 레이블, 오른쪽의 값, 블록).
• SM +: 과도한 열로만 수평 스크롤하고 캡/첫 번째 열을 수정하십시오.
• 숫자-표-수, 10 진수 정렬.

14) 현지화 및 RTL

'dir = "rtl"' + ': dir (rtl)' 아이콘/화살표/여백을 반영합니다.
번역은 라인의 길이를 20-30% 증가시킬 수 있습니다.
일부 저술 (예: Georgian/Thai) 의 경우 기본 크기를 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; '클램프 ()' 를 통한 유체 핀.
• 텍스트 대비는 두 테마에서 WCAG와 일치합니다.

이미지

• 소위 'srcset/sizes', 'pascess-ratio' glazy-loading; CLS가 없습니다.

입력 및 A11y

• 키보드 탐색; ': 초점이 보이는' 보이는.
• 터치 대체 호버; 44 × 44 이상의 영역을 클릭하십시오.
• '감소 운동 선호' 가 지원됩니다.

성능

• '변환/불투명도' 만 애니메이션됩니다. 심각한 영향은 제한적입니다.
• 중요한 CSS/JS가 효율적으로로드됩니다.

18) 설계 시스템의 문서

"응답 및 중단 점": 중단 점, 컨테이너, 기둥 및 거터 테이블.
컨테이너 쿼리: 적응 형 구성 요소의 예.
"유체 유형": '클램프 ()' 공식 및 스케일 사전 설정.
"탐색 패턴": XS/SM/MD/LG/XL 변형.
짧은 클립과 CLS/LCP 값으로 "Do/Do n 't".

간단한 요약

적응성은 혼란스러운 미디어 쿼리가 아닌 전략입니다. 컨텐츠 및 장치 분석에 대해서는 미디어 쿼리를 성숙한 그리드 및 컨테이너 쿼리와 결합하고 타이포그래피에 '클램프 ()' 를 사용하고 이미지 및 성능을 제어하며 모든 입력 및 A11y 방법을 지원합니다. 따라서 인터페이스는 모든 화면에서 예측 가능하고 빠르며 똑같이 편리합니다.