CSS 클램프() 계산기

CSS 클램프(MIN, PREFERRED, MAX)를 사용하면 하나의 선언으로 전체 미디어 쿼리 스택을 대체할 수 있습니다. 값은 가장 작은 뷰포트 아래의 MIN, 가장 큰 뷰포트 위의 MAX에 유지되며 그 사이에서 부드럽게 확장됩니다. 어려운 부분은 누구도 직접 파생시키고 싶어하지 않는 선호 용어(0.833rem + 0.833vw와 같은 뷰포트 관련 표현)입니다. 이 계산기는 최소 크기, 최대 크기 및 각 숫자가 적용되는 뷰포트 너비의 네 가지 숫자를 사용하여 실제 크기를 계산합니다.

최종 선뿐만 아니라 모든 중간 숫자가 표시됩니다. 기울기(뷰포트의 픽셀당 값이 증가하는 크기 단위 수), vw 계수로 표현된 동일한 기울기, y축 교차점(선이 지정한 두 점을 정확히 통과하도록 vw 항에 추가된 상수)입니다. 튜토리얼에서 클램프() 값을 이해하지 못한 채 붙여넣은 사람이라면 누구나 여기서 실제 연산을 보고 확인할 수 있습니다.

뷰포트 너비 슬라이더는 실시간 미리 보기 상자를 구동하므로 단순히 계산되는 것이 아니라 유동적인 크기 조정이 표시됩니다. 최소 및 최대 중단점 사이로 드래그하여 실제 브라우저 창의 크기가 조정되는 동안 샘플 텍스트의 크기가 정확하게 조정되는 것을 확인하세요. 키를 누를 때마다 출력 라인과 분석이 업데이트됩니다. 이는 기본 글꼴 크기 자체도 변환해야 할 때 자연스럽게 px-rem 변환기와 쌍을 이룹니다.

한 단계로 완벽한 유동 타이포그래피 시스템을 위한 유형 스케일 모드로 전환합니다. 기본 크기와 모듈 비율(1.125 ~ 1.5)을 입력하고 6가지 크기(소형, 기본, h4, h3, h2 및 h1)를 얻습니다. 각 크기는 보다 부드러운 모바일 진행과 전체 데스크톱 비율 사이에서 자체 클램프() 선으로 계산되어 CSS 사용자 정의 속성 블록으로 복사할 준비가 됩니다.