CSS clamp() 함수로 사이트 응답성 향상

사이트의 응답성을 향상시키기 위해 Web API ResizeObservercalc() function를 사용하는 일부 복잡한 이벤트 리스너 또는 브라우저 창 크기에 따라 필요한 페이지 요소를 대체하는 CSS 미디어 쿼리를 사용할 필요가 없습니다.
Clamp()는 거의 모든 요소가 응용 프로그램 창에 맞게 특정 제한 내에서 크기를 조정할 수 있도록 특별히 설계된 유일한 기능입니다.

통사론

clamp(MIN, VALUE, MAX)는 clamp가 최소값과 최대값 내에 있는 경우 두 번째 인수(권장)로 지정된 값을 반환하는 것으로 계산됩니다. 계산된 값은 인수로 전달할 수 있습니다. max(MIN, min(VALUE, MAX))

단위

선호하는 값으로 다음 단위를 사용할 수 있습니다.

본문에서 클램프를 사용하는 경우 표시 영역의 너비(또는 클램프를 포함하는 컨테이너의 너비)입니다.

em은 현재 컨텍스트의 글꼴 크기입니다.

rem은 HTML 요소 컨텍스트의 글꼴 크기입니다.

vw - 창 너비의 1%입니다.

vh - 창 높이의 1%입니다.

지원되는 브라우저

클램프는 Internet Explorer에서만 지원되지 않습니다.

사용처

헤더 글꼴

clamp()의 훌륭한 사용 사례는 헤더에 있습니다. 최소 크기가 16픽셀이고 최대 크기가 50픽셀인 헤더가 필요하다고 가정해 보겠습니다. clamp() 함수는 지정된 한계를 초과하지 않는 중간 값을 제공합니다.

.title {
  font-size: clamp(16px, 5vw, 50px);
}

클램프()는 사용된 글꼴 크기를 쉽게 읽을 수 있도록 보장하므로 여기에서 이상적입니다. min()을 사용하여 최대 글꼴 크기를 설정하면 작은 화면에서 글꼴을 제어할 수 없습니다.

CSS 그리드 - 반응형 그리드

또 다른 좋은 예는 모바일 화면의 반응형 CSS 그리드 열 간격입니다. 클램프를 사용하면 구현하기가 매우 간단합니다.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

섹션에 대한 적응 패딩

클램프()는 섹션 사이의 최소 및 최대 간격을 설정하는 데에도 이상적입니다. 이는 다음 CSS를 사용하여 수행할 수 있습니다.

.section {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}