用好CSS的clamp()这个新特性，轻松实现响应式布局，特别是移动端

px是我们日常开发中熟悉且常用的CSS单位，但在当今设备屏幕尺寸千差万别的时代，px似乎不再像以前那么好用了。今日分享一个强大的CSS新特性clamp()，它将改变我们编写响应式样式的方式，让我们告别繁琐的媒体查询，轻松实现流畅的“流体式”布局。

px的问题
px是一个绝对单位，它代表屏幕上的一个物理像素点，这意味着 width: 300px; 在任何设备上都会试图渲染成 300 个像素点宽。

为了解决不同尺寸设备渲染的问题，以前的做法是使用大量的媒体查询（@media）：

.title {
 font-size: 48px;
}

@media (max-width: 768px) {
 .title {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
 .title {
    font-size: 24px;
  }
}

仅为了一个字体大小，就写了这么多代码。如果再加上 padding、margin、width… 代码会变得臃肿不堪，难以维护。更重要的是，这种“阶梯式”的调整是不连贯的，在断点之间，布局仍然是僵硬的。

CSS 数学函数 clamp()
clamp() 的语法非常简单：clamp(MIN, PREFERRED, MAX)。clamp() 是 CSS 中一个非常实用的函数，用于限制一个值在最小值和最大值之间，常用于实现响应式设计中的“弹性”尺寸（如字体、宽度、间距等）。

浏览器会首先尝试使用 PREFERRED 值，如果 PREFERRED 值小于 MIN，则采用 MIN 值，反之，则采用 MAX 值。

流体式字体排版
让我们用 clamp() 来重写刚才的字体大小示例：

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

让我们来解读一下这行代码的魔力：

1.5rem (最小值)：在非常窄的屏幕上（如手机），字体大小最小为 1.5rem（约 24px），保证可读性
5vw (首选值)：字体大小根据视口宽度进行动态缩放，4vw 意味着字体大小是视口宽度的 4%。当用户缩放浏览器窗口时，字体会如丝般顺滑地变大或变小
3rem (最大值)：在非常宽的屏幕上（如 4K 显示器），字体大小最大为 3rem（约 48px），保持美观
最终，字体大小会在 24px 到 48px 之间根据屏幕宽度平滑地过渡，不再有断点之间的跳变，这是真正的“流体式”设计！

clamp() 在布局中的应用
clamp() 的威力远不止于此，我们可以将它应用到任何需要动态调整的地方：

1. 响应式容器宽度

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

在小屏幕上，宽度是 90%，但最小不会低于 320px，在超大屏幕上，宽度也是 90%，但最大不会超过 1200px。

1. 弹性内边距（padding）

   .card {
   padding: clamp(0.5rem, 2vw, 2rem);
   }
   

2. 图片最大/最小尺寸控制

   img {
   width: clamp(200px, 50vw, 600px);
   height: auto;
   }