41.在 CSS 中使用 clamp() 实现响应式排版

在 CSS 中使用 clamp() 实现响应式排版

响应式排版已经流行了一段时间,但一些开发人员发现它难以实现。这通常是由于令人困惑的代数公式或复杂的 hack。幸运的是,CSS 引入了 clamp() 函数,它可以通过一行代码轻松创建响应式排版。您只需设置最小值、最大值和首选值,浏览器就会完成其余工作。

h2 {
   
  font-size: clamp(1.5rem, 5vw, 3rem);
}

有关更复杂的示例,请查看"流式排版"代码段。

clamp()