我们都知道自适应布局有很多种方式可以实现，下面让我们来看看有哪些方式比较简单？

利用clamp函数

clamp() 通过“限制”或限制最小和最大范围之间的灵活值来工作

使用方法如下：

• 最小值：例如 16px
• 弹性值：例如 5vw
• 最大值：例如 34px

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

在此示例中，该 h1 font-size 值将是 5% 视口宽度。但前提是该值大于 16px 和小于 34px。

例如，如果您的视口宽度为 300px，则您的 5vw 值将等于 15px。但是，您将该 font-size 值限制为的最小值 16px，这样就可以了。

另一方面，如果您的视口宽度为 1400px，则您 5vw 将大声疾呼 70px！但幸运的是，您将该最大值限制为34px，因此它不会超过该最大值 。

我可以为此模板添加此代码…

img {
  width: clamp(15vw, 800%, 100%);
}

h1 {
  font-size: clamp(20px, 5vw, 35px);
}

p {
  font-size: clamp(10px, 4vw, 20px);
}

实际上，任何其他接受长度，频率，角度，时间，百分比，数字或整数的属性

利用grid布局新特性

强居中

三段式布局

经典布局