菜鸟教程
教程 css tutorial

clamp() 函数

clamp() 是 CSS 提供的一个强大的函数，用于在设置样式时限定一个值的最小值、理想值和最大值。它是响应式设计中非常实用的工具，尤其适用于字体大小、元素尺寸、间距等。

1. 语法结构

css 
clamp(min, preferred, max)

含义如下：

  • min：最小值
  • preferred：理想值（通常为百分比或 vw）
  • max：最大值

浏览器将根据视口宽度，在 min 和 max 之间取最接近 preferred 的值。

示例：字体大小自动调整

css 
h1 {
  font-size: clamp(20px, 4vw, 36px);
}

在小屏幕时最小 20px，随着视口放大最大不超过 36px。

2. 应用场景

  • 自适应字体大小
  • 自适应布局间距
  • 图片或容器尺寸限制

clamp() 函数示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>clamp() 函数示例</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f1f8e9;
}


.title {
  font-size: clamp(24px, 5vw, 48px);
  color: #33691e;
  text-align: center;
  margin-bottom: 20px;
}

.content {
  font-size: clamp(14px, 2vw, 20px);
  max-width: 600px;
  margin: auto;
  background-color: #dcedc8;
  padding: clamp(16px, 5vw, 40px);
  border-radius: 8px;
  line-height: 1.6;
}



</style>
</head>


<body>
<h1 class="title">使用 clamp() 实现响应式排版</h1>
<div class="content">
当前页面根据视口宽度自动调整字体与内边距大小。试着拖动浏览器窗口，观察文本样式的变化效果。
</div>
</body>


</html>

相关内容