▲

동적 Viewport 단위 사용

 (web.dev)
18P by ragingwind 2022-11-30 | favorite | 댓글과 토론
  • 데스크탑에서 vw, vh 는 viewport 의 크기를 잘 나타냄
  • 모바일에서는 툴바, 주소창 같은 동적으로 생성되는 UI 에 의해 크기의 영향을 받음 따라서 100vh 는 viewport 의 크기를 넘어서거나 스크롤등으로 주소창이 움츠려들면 viewport 크기에 맞게 됨
  • CSS 워킹그룹에서 이런 동적으로 변화하는 크기에 맞추어 쓸 수 있는 단위 제공해서 실제 viewport 와 딱 맞는 크기를 제공
    • Large viewport: lvh 는 동적으로 생성되는 UI 가 없는 경우
    • Small viewport: svh 는 움처려든 UI 가 다시 확장 된 경우
    • Dynamic viewport: dvh 동적 UI 상태에 맞게 viewport 크기와 같아짐 Chrome 108, Firefox 101, Safari 15.4 에서 지원