⭐ 0
🔍
텍스트 이미지 PDF 및 문서 오디오 음악 전자 회로 시간 유틸리티 검증인 신비주의 게임

유체 유형 스케일 생성기

단계별로 표시되는 경사와 교차점 및 실시간 크기 조정 미리보기를 사용하여 두 개의 뷰포트 너비에 걸쳐 최소 및 최대 크기에서 실제 유동 CSS 클램프() 값을 계산합니다.

처리 중... 0%

결과

이 페이지에서는 16px 기본과 1.25(주 3분의 1) 비율이 이미 선택된 활자 크기 조정 모드에서 직접 계산기를 엽니다. 이는 활자체 크기의 견고하고 널리 사용되는 시작점입니다. 이 두 숫자만으로 6가지 크기(small, base, h4, h3, h2 및 h1)가 생성됩니다. 각 크기는 단일 고정 크기가 아닌 고유한 Fluid 클램프() 값입니다.

모든 단계에서 기본 크기는 모바일과 데스크톱 모두에서 동일한 값으로 유지되고, 제목은 좁은 모바일 뷰포트보다 더 넓은 데스크톱 뷰포트에서 더 공격적으로 확장됩니다. 이는 작은 화면에 더 완만한 비율을 선택하고 큰 화면에 더 굵은 비율을 선택하는 것과 동일한 아이디어로, 선택한 단일 비율에서 자동으로 파생됩니다.

비율을 1.125, 1.2, 1.333 또는 1.5로 변경하면 전체 테이블이 즉시 재생성되며 아래의 버튼은 참조할 스타일시트의 나머지 부분에 대한 CSS 사용자 정의 속성의 즉시 붙여넣기 가능한 블록으로 6개의 클램프() 값을 모두 복사합니다.

🛡️
브라우저에서 실행됨

귀하의 파일과 입력 내용은 절대 이 장치를 떠나지 않습니다. 처리는 완전히 오프라인으로 실행됩니다. 100% 안전합니다.

허용되는 형식 및 규칙

  • 실제 유동 타이포그래피 수학: 최종 클램프() 라인뿐만 아니라 명시적으로 표시된 기울기, vw 계수 및 y축 교차점.
  • 실시간 미리보기: 뷰포트 너비 슬라이더를 드래그하여 실제 브라우저 창의 크기가 조정되는 동안 샘플 텍스트의 크기가 정확하게 조정되는 것을 확인하세요.
  • 유형 배율 모드: 기본 크기와 1.125에서 1.5 사이의 비율은 복사 준비 CSS로 6개의 유동 클램프() 단계(small, base, h4, h3, h2, h1)를 생성합니다.

주요 이점

✓ 입력할 때 클램프() 선, 경사 및 교차점 번호, 실시간 미리 보기가 모두 업데이트되므로 누를 버튼이 없습니다.
✓ 뷰포트 너비 슬라이더는 실시간 미리보기 상자를 구동하므로 수식뿐만 아니라 최소 및 최대 중단점 사이에서 작동 중인 정확한 유동적 크기 조정을 볼 수 있습니다.
✓ 별도의 유형 스케일 모드는 하나의 기본 크기와 비율을 CSS 사용자 정의 속성 블록으로 준비된 완전한 6단계 유동 제목 스케일로 변환합니다.

사용 사례

  • • 튜토리얼에서 눈여겨보는 대신 최소/최대 글꼴 크기와 뷰포트 범위를 실제 클램프() 선(기울기, vw 계수 및 교차점 포함)으로 바꿉니다.
  • • 뷰포트 너비 슬라이더를 드래그하여 스타일시트에 적용하기 전에 실제 브라우저 창의 크기를 조정하는 동안 유동적인 제목이나 본문 크기를 미리 볼 수 있습니다.
  • • 바로 붙여넣을 수 있는 CSS 사용자 정의 속성 블록으로 복사된 하나의 기본 크기 및 비율에서 전체 6단계 유동 유형 배율(소형부터 h1까지)을 생성합니다.
  • • 글꼴 크기 대신 간격(여백, 패딩, 간격)을 위한 유동적 클램프()를 구축합니다. 동일한 기울기/교차점 공식이 모든 CSS 속성에 적용됩니다.