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

유체 간격 클램프() 생성기

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

처리 중... 0%

결과

CSS 클램프()는 글꼴 크기와 간격에 대해 정확히 동일한 방식으로 작동합니다. 속성은 글꼴 크기 대신 여백, 패딩 또는 간격이 됩니다. 이 페이지는 320px~1280px 뷰포트에서 8~32px 범위의 계산기를 엽니다. 이는 미디어 쿼리가 보이지 않는 경우 휴대폰에서는 빡빡하고 데스크톱에서는 넉넉하게 느껴지는 섹션 패딩 또는 카드 간격에 대한 일반적인 단계입니다.

기본 수학은 숫자가 무엇을 나타내는지 신경 쓰지 않습니다. 유동적인 제목 크기를 생성하는 동일한 기울기 및 y축 교차 공식은 유동적인 간격 값을 생성하므로 아래 분석은 8px 및 32px가 패딩을 위한 복사 준비 클램프() 라인으로 어떻게 변하는지 정확하게 보여줍니다: 클램프(...).

뷰포트 너비 슬라이더를 드래그하여 두 중단점 사이의 너비에서 간격이 어떻게 느껴지는지 미리 보고, 범위를 더 좁거나 느슨하게 하기 위해 최소 및 최대 값을 조정하고, 완성된 선을 필요한 간격 속성에 바로 복사합니다.

🛡️
브라우저에서 실행됨

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

허용되는 형식 및 규칙

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

주요 이점

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

사용 사례

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