유동적 값을 위한 min(), max() 및 clamp()

CSS 비교 함수(min(), max(), clamp())를 사용하면 미디어 쿼리 없이 컨텍스트에 맞게 조정되는 반응형 크기를 구현할 수 있습니다. 중단점 기반 접근 방식보다 더 우아하고 간결합니다.

min(a, b, ...)는 모든 인수를 평가한 후 가장 작은 값을 사용합니다. 여기서 "최솟값"은 시각적 결과를 의미하며, 가장 제한적인 옵션을 뜻합니다.

max(a, b, ...)는 가장 큰 값을 선택하여 최소 기준이 항상 충족되도록 합니다.

clamp()는 값을 특정 범위 안으로 제한합니다. 선호 값(가운데 인수)은 일반적으로 유동적입니다. 최솟값과 최댓값은 절대적인 경계를 제공합니다.

각 제목 수준에 하나의 clamp()만 사용하여 여러 중단점 재정의를 대체하세요:

패딩, 마진, 간격에도 유동적인 크기 지정을 적용하세요. 이는 "내재적" 설계의 핵심 기법입니다:

가장 깔끔한 컨테이너 패턴입니다. 뷰포트 너비의 90%를 항상 사용하되 1200px보다 넓어지지 않도록 하나의 표현식으로 지정합니다:

작은 뷰포트에서 본문 텍스트가 지나치게 작아지지 않도록 합니다:

복잡한 제약 조건을 만들기 위해 이러한 함수를 중첩할 수 있습니다:

더 안전한 열의 최소 크기를 지정하려면 minmax() 안에 min()을 사용하세요:

세 비교 함수 모두 최신 브라우저에서 완전히 지원됩니다(Chrome 79+, Firefox 75+, Safari 11.1+). 공급업체 접두사는 필요하지 않습니다.

min()은 더 작은 값(상한)을 선택합니다. max()는 더 큰 값(하한)을 선택합니다. clamp(min, preferred, max)는 유동적인 값을 제한합니다. 이들을 함께 사용하면 미디어 쿼리 없이 유동적인 타이포그래피와 간격을 구현할 수 있습니다. 가장 강력한 패턴은 자동으로 반응하는 제목을 위한 clamp(1.5rem, 4vw, 3rem)입니다.