CSS 클램프 생성기

CSS clamp() 생성기는 두 화면 너비 사이에서 값을 부드럽게 조정하는 단일 클램프(최소, 선호, 최대) 선언을 작성합니다. 전화기의 24px에서 데스크톱의 48px로 제목을 단계별로 지정하기 위해 여러 미디어 쿼리를 작성하는 대신 최소 크기, 최대 크기 및 매핑되는 뷰포트 범위를 설정하고 생성기는 그 사이의 모든 크기를 보간하는 CSS의 한 줄을 반환합니다.

clamp() 함수는 세 가지 인수를 사용합니다: 하한, 선호 값, 상한. 브라우저는 최소값보다 낮거나 최대값보다 높지 않는 한 선호 값을 사용하며, 이 경우 해당 경계에 고정됩니다. 이 생성기는 선호 값을 뷰포트의 선형 함수로 계산하여 고정된 rem 항과 vw 항을 결합하여 결과가 최소값 아래로 떨어지거나 최대값을 초과하지 않으면서 창과 보조를 맞춰 증가합니다. 이 기술은 여백, 패딩, 간격 및 너비에 동일하게 작동하지만 종종 유체 타이포그래피라고 합니다.

모든 것이 클라이언트 측 JavaScript 로 브라우저에서 계산되므로 입력한 내용이 업로드되지 않으며 도구가 로드되면 오프라인으로 작동합니다. 크기를 픽셀 또는 rem 단위로 입력하고 사용자 정의 루트 글꼴 크기를 설정하고 일반적인 뷰포트 너비에서 계산된 값을 보여주는 미리보기 테이블을 읽을 수 있으므로 clamp()를 스타일시트에 붙여넣기 전에 곡선의 동작을 확인할 수 있습니다.

유체 사이징은 의도적으로 피할 가치가 있는 하나의 접근성 트랩을 가지고 있습니다. 중간 용어가 뷰포트 단위로 순수하게 표현되는 클램프 표현식은 독자의 글꼴 크기 설정을 무시합니다. 왜냐하면 vw 는 이에 반응하지 않기 때문이며,성장할 수 없는 텍스트는 WCAG 1,4.4 에서 rem 구성 요소를 기본값으로 유지하는 것은 생성된 출력이 하는 것으로,크기가 여전히 브라우저 줌과 더 큰 기본 글꼴에 반응한다는 것을 의미합니다. 항상 두 경계를 모두 설정하십시오: 그들 없이 값은 어느 방향으로든 제한 없이 확장됩니다.