了解这个CSS属性：clamp()，自适应布局，事半功倍！

最新推荐文章于 2024-09-11 17:18:21 发布

ToBeOrNotToBe_Up

最新推荐文章于 2024-09-11 17:18:21 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： html css3 clamp 自适应布局事半功倍

本文链接：https://blog.csdn.net/jasonzhang20100713/article/details/109578101

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

clamp()

MDN Web Docs说明

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

示例

clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}