반응형 디자인

웹 기능: 컨테이너 쿼리 (크기) 작은 표시 영역 단위, 큰 표시 영역 단위, 동적 표시 영역 단위 aspect-ratio min(), max(), clamp() 표시 영역 단위

전반적인 권장사항

  • @container 쿼리를 사용하여 표시 영역이 아닌 상위 컨테이너의 크기에 맞게 조정되는 구성요소 기반 반응형 레이아웃을 만듭니다. 자세한 내용은 크기 인식 스타일 지정을 참고하세요.
  • 모바일 브라우저 UI 요소(예: 주소 표시줄)가 표시되거나 사라질 때 레이아웃이 깨지지 않도록 vh/vw 대신 동적 표시 영역 단위(dvh, dvw)를 사용합니다.
  • 미디어 요소 (예: <img> 및 <video>)에 aspect-ratio을 사용하여 로드 중에 공간을 예약하고 누적 레이아웃 이동 (CLS)을 방지합니다.

반응형 UI의 레이아웃 메커니즘 (flexbox, 그리드, 컨테이너 쿼리 단위, 표시 영역 단위)은 CSS 레이아웃 및 반응형 디자인을 참고하세요.

반응형 서체

  • clamp()에서 표시 영역 상대 단위와 글꼴 상대 단위를 결합하여 표시 영역 크기에 따라 글꼴 크기를 조정하면서 원하는 범위 내에 유지되도록 해야 합니다. 예를 들면 clamp(2rem, 1rem + 5vw, 4rem)입니다. 표시 영역 상대 단위와 글꼴 상대 단위의 비율을 조정하여 글꼴 크기가 변경되는 속도를 제어합니다.
  • clamp() 없이 vw만 글꼴 크기에 사용하지 마세요. 극단적인 화면에서 텍스트가 너무 작거나 너무 크게 조정될 수 있습니다.

표시 영역 대신 컨테이너를 사용하여 서체와 간격을 조정하려면 유연한 확장을 참고하세요.