CSS Clamp 流体尺寸计算器

什么是clamp()?

CSS clamp()函数将一个值限制在最小值和最大值之间，同时提供一个首选值。语法如下：

clamp(最小值, 首选值, 最大值)
              

这相当于：

max(最小值, min(首选值, 最大值))
              

常见用途

• 创建响应式字体大小，在不同屏幕尺寸下自动调整
• 设置流体间距，如边距和内边距
• 实现响应式布局，无需使用媒体查询
• 创建可以缩放但有上下限的元素

流体排版示例

/* 在320px到1200px视口之间，
   字体大小从16px线性增加到24px */
font-size: clamp(16px, 1vw + 13px, 24px);
              

计算方法

首选值通常使用以下两种方法计算：

1. 首选值法：直接使用视口单位（如vw）加上固定值

   首选值 = N vw + M px

2. 斜率截距法：基于最小和最大视口宽度计算线性函数

   首选值 = 斜率 * 100vw + 截距

使用提示

• 为不支持clamp()的浏览器提供后备方案
• 避免使用过大的缩放范围，以保持可读性
• 考虑用户的缩放偏好，不要完全依赖视口单位
• 测试不同屏幕尺寸下的效果
• 结合使用rem和vw单位可以兼顾用户缩放和响应式设计