CSS clamp() 生成器
根据尺寸和视口范围生成响应式 clamp() 代码，无需媒体查询即可实现随屏宽平滑变化的流式排版。所有计算均在浏览器中完成。
输入
结果
- clamp() 值
- clamp(1rem, 0.884vw + 0.7928rem, 1.5rem)
- 使用示例
- font-size: clamp(1rem, 0.884vw + 0.7928rem, 1.5rem);
常见问题
clamp()는 어떻게 동작하나요?
clamp(최솟값, 선호값, 최댓값)은 선호값을 사용하되 범위를 벗어나지 않게 고정합니다. 선호값을 'vw + rem' 형태의 일차식으로 두면 뷰포트 폭에 비례해 크기가 변합니다.
vw 계수와 rem 절편은 어떻게 계산되나요?
두 점 (최소 뷰포트, 최소 크기)와 (최대 뷰포트, 최대 크기)를 지나는 직선의 기울기와 절편입니다. 기울기 × 100이 vw 계수가 되고 절편은 16px = 1rem으로 환산합니다.
rem을 쓰는 이유는 무엇인가요?
사용자가 브라우저 기본 글꼴 크기를 키웠을 때 함께 커지도록 하기 위해서입니다. 순수 vw만 쓰면 브라우저 확대·접근성 설정이 무시되어 WCAG 위반이 될 수 있습니다.
相关工具
CSS 单位转换器
根据基准字体大小在 px、rem、em、pt、% 之间相互转换，适用于响应式排版。所有计算均在浏览器中完成。
CSS 阴影生成器 (box-shadow)
调节偏移、模糊、扩散、颜色和不透明度生成 CSS box-shadow 代码，并实时预览效果。支持 inset 内阴影。所有处理均在浏览器中完成。
CSS 渐变生成器
使用两种颜色和角度生成 CSS linear-gradient/radial-gradient 代码，实时预览效果并提供中间色信息。所有处理均在浏览器中完成。
颜色对比度检查器
计算文字与背景颜色的对比度，并判定是否符合 WCAG 2.x AA/AAA 无障碍标准。所有计算均在浏览器中完成。
颜色转换器
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
颜色明暗生成器
从基准色生成由浅到深的 HEX 调色板，适合制作设计系统的色阶。所有处理均在浏览器中完成。