css-clamp 响应式布局

=

一般情况下我们会采用@media来设置不同分辨率下的排版，会写出很多@media，或者只是为一个属性写了很多@meida。但是我们用css的clamp就使得变得相对简单

css数学函数 clamp()

clamp的语法非常简单： clamp(min, preferred, max);

浏览器会首先尝试使用 preferred值，如果preferred值小于min，则采用min值，反之，采用max值。

例子：

font-size: clamp(1rem, 2vw + 1rem, 3rem);

解读：

1、1rem是最小值：在非常窄的屏幕显示最小值

2、2vw+1rem是首选值，字体大小根据视口宽度进行动态缩放，浏览器窗口缩放时，字体会丝滑的变大或变小

3、3rem是最大值，在非常宽的屏幕上，字体大小为3rem

 

布局也可以使用clamp

width: clamp(320px, 90%,1200px)

 

 

 

 

-