최신 CSS의 뷰포트 높이 및 너비 단위-CSS 튜토리얼-php.cn

최신 CSS의 뷰포트 높이 및 너비 단위

WBOY

풀어 주다： 2024-07-19 09:49:01

원래의

889명이 탐색했습니다.

Viewport height and width units in modern CSS

전통적인 뷰포트 단위 vh 및 vw만 사용하는 CSS 코드베이스와 테마 정의를 계속 접하면서 요즘 우리가 사용할 수 있는 강력한 도구에 대한 블로그 게시물을 작성하려고 생각했습니다. 이는 우리의 삶을 더 쉽게 만들고 CSS 코드를 더 좋게 만들 수 있습니다.

좋은 오래된 뷰포트 유닛

간단히 말하면, 수년 동안 우리는 vh와 vw를 사용하여 초기 뷰포트 높이와 너비의 백분율로 정의해 왔습니다. 예를 들어 모든 장치의 전체 뷰포트를 녹색으로 채우려면 다음을 수행할 수 있습니다.

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

로그인 후 복사

..이것이 아마도 효과가 있을 것입니다. 그러나 이는 어떤 이유로든 표시되는 뷰포트에 영향을 미칠 때까지만 안정적으로 작동합니다. 예를 들어, 대부분의 최신 모바일 브라우저는 사용자가 페이지 스크롤을 시작하면 제목 및 주소 표시줄의 일부 또는 전부를 숨기며 뷰포트에도 영향을 미치고 크고 굵은 녹색 요소를 덜 크게 만듭니다.

현대적인 뷰포트 유닛

현재 최신 CSS 사양에서는 소위 대형, 소형 및 동적 뷰포트 단위를 안전하게 사용할 수 있습니다.

대형 뷰포트 단위

대형 뷰포트 백분율 단위(lv*) 및 기본 뷰포트 백분율 단위(v*)는 대형 뷰포트 크기와 관련하여 정의됩니다. 뷰포트 크기는 동적으로 확장되고 축소되어 축소되는 모든 UA 인터페이스를 가정하여 결정됩니다.

기본적으로 lvh와 lvw는 브라우저 UI가 가장 작고 웹사이트 콘텐츠가 가장 큰 상태일 때 뷰포트와 관련된 백분율으로 사용할 수 있는 단위를 제공합니다. lvh 및 lvw는 실제로 기존 vh 및 vw 장치와 동일한 동작을 제공합니다.

예: lvh 및 lvw 단위를 사용하는 예는 전체 페이지 배경으로 작동해야 하는 요소의 높이와 너비를 정의하는 것입니다.

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

로그인 후 복사

작은 뷰포트 단위

작은 뷰포트 백분율 단위(sv*)는 작은 뷰포트 크기를 기준으로 정의됩니다. 뷰포트 크기는 동적으로 확장되고 축소되어 확장되는 모든 UA 인터페이스를 가정합니다.

즉, svh와 svw는 브라우저 UI가 가장 큰 상태이고 웹사이트 콘텐츠가 가장 작은 상태일 때 화면을 채우는

데 사용할 수 있는 단위를 제공합니다.

예: svh 단위를 사용하는 좋은 예는 고정된 하단 막대 또는 정적 헤더의 높이를 정의하는 것입니다.

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

로그인 후 복사

동적 뷰포트 단위

동적 뷰포트 백분율 단위(dv*)는 동적 뷰포트 크기, 즉 동적으로 확장되고 축소되는 모든 UA 인터페이스를 동적으로 고려하여 뷰포트 크기가 결정됩니다.

뷰포트 자체가 변경되지 않은 경우에도 동적 뷰포트 백분율 단위의 크기가 안정적이지 않습니다. 이러한 단위를 사용하면 콘텐츠의 크기가 조정될 수 있습니다. 사용자가 페이지를 스크롤하는 동안. 사용량에 따라 이는 사용자에게 불편을 주거나 성능 측면에서 비용이 많이 들 수 있습니다.

dvh 및 dvw 단위가 이상적으로 들리겠지만, 위의 정의에 언급된 주의 사항과 스크롤 요소에 사용할 때 겪은 몇 가지 문제로 인해 매우 특정한 상황에서만 사용해야 한다는 결론을 내렸습니다.

예 1: dvh를 사용하는 예는 뷰포트 변경에 따라 조정되어야 하는 콘텐츠 요소의 높이를 정의하는 것입니다.

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

로그인 후 복사

예 2: 지난 주에 양식이 뷰포트의 전체 높이와 너비를 차지하는 동안 스크롤이 비활성화된 양식에 대한 버그가 보고된 경우가 있었습니다. 모바일 사용자가 입력에 집중하면 장치 키보드가 표시될 때 버그가 발생했습니다. 그러면 양식 레이아웃이 깨집니다. 수정 사항은 높이 정의에 vh 대신 dvh를 사용하는 것이었습니다.