持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情
前言
响应式布局已经被提出很多年了,因为我们的电子设备多种多样,比如手机、平板、电脑等等,这些设备的屏幕大小都是不一样的。如果我们的网页在每个设备上显示一样的话,那么用户体验无疑是很差的,所以为了解决这个问题,我们通常有两种方案:响应式布局和编写多套网页代码。编写多套网页代码工作量很大,所以很多公司都直接采用响应式布局,响应式布局的原理就是根据设备屏幕的不同大小加载不同的css
,我们经常采取的方案就是媒体查询。
不过今天我给大家介绍一个更为简单的方法实现响应式:利用clamp()
函数!
1.基本介绍
我们知道不仅仅JS
里面有函数,其实CSS
里面也有函数的,比如calc()
、max()
等等都是CSS
函数,今天我们讲的clamp() 也是CSS
的一个函数。
学习一个新的知识我们都先就要去官网看看,毕竟这才是权威,我们先来看看官网是怎么解释的。
官网解释:
clamp()
函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
估计很多小伙伴都会被上面官网的解释绕晕吧!不过我们应该还是有个大概的理解,我们从上面的话中抽出一些关键词,方便大家理解。
关键词:
- 限制值范围
- 最大值
- 最小值
- 三个参数
上面的关键词中我们先来学习三个参数,了解了三个参数之后我们就会很快理解该函数做什么了。
接收参数:
MIN
:最小值,通常就是我们CSS
表示大小的单位,比如rem
,px
,vw
等等VAL
:首选值,通常就是我们CSS
表示大小的单位,比如rem
,px
,vw
等等MAX
:最大值,通常就是我们CSS
表示大小的单位,比如rem
,px
,vw
等等
知道这三个参数后,我们在将这三个参数代入官方的解释中去看,应该就能理解了,我们这里用自己的话讲解一遍。
通俗解释:
既然
clamp()
是一个函数,那么该函数的返回值是什么呢?首先该函数接收三个参数,形如clamp(MIN, VAL, MAX)
,三个参数分别代表最小值、首选值、最大值。当VAL < MIN
时,函数返回MIN
,当VAL > MAX
时,函数返回MAX
,当MIN < VAL < MAX
时,函数返回VAL
。
到这里我们应该就能真正理解该函数在做什么了,无非就是三个参数之间的比较,然后返回不同的值罢了。
那和我们的响应式有什么关系呢?
响应式的页面原理就是根据不同设备大小渲染不同的CSS
,而我们这里的函数也是根据VAL
的大小,返回不同的值,是不是和我们的响应式有相似之处了,所以我们可以利用clamp
函数来实现响应式布局。
2.简单使用
既然知道了clamp
函数的语法以及作用,那么我们可以写一个简单的小案例加深一下印象,也为小伙伴们思考它的使用场景提供一点思路。
实现需求:
屏幕大小发生变化,字体大小也会发生变化。
这是一个很常见的需求,我们需要在不同的屏幕大小之下显示不同的字体大小。
代码如下:
<head>
<style>
div {
height: 100px;
width: clamp(400px, 40vw, 500px);
font-size: clamp(1.8rem, 10vw, 3.8rem);
border: 1px solid green;
}
</style>
</head>
<body>
<div>字体</div>
</body>
实现效果:
上段代码中给div
设置宽度时利用clamp
函数,其中MIN=400px
,VAL=40vw
,MAX=500px
。当我们拖动控制台时,40vw
的实际宽度也是在跟着变化的,当40vw<400px
时,div
的宽度为400px
,当40vw>500px
时,div
的宽度为500px
,当400px<40vw<500px
,div
的宽度为40vw
。
同理,代码中的字体大小的具体值我们也利用了clamp
函数,字体最小为1.8rem
,最大为3.8rem
。具体结果都是VAL
与MIN
和MAX
比较得出的。
3.响应式布局
前面我们的简单示例也算实现了响应式,不过没有那么正式,可能很多小伙伴还体会不到它的魅力。我们接下来就稍微正式一点,利用clamp
实现一个简单的响应式页面。
代码如下:
<head>
<style>
* {
box-sizing: border-box;
}
body {
padding: 5px;
background: #84a0ab;
}
.header {
padding: 12px;
text-align: center;
background: #fffaf6;
font-weight: bold;
}
.card {
background-color: #8f8261;
padding: 10px;
margin-top: 20px;
font-weight: bold;
}
img {
width: clamp(15vw, 800%, 100%); // 图片宽度使用为100%
}
h1 {
font-size: clamp(20px, 5vw, 35px);
}
p {
font-size: clamp(10px, 4vw, 20px);
}
</style>
</head>
<body>
<div class="header">
<h1>小猪课堂</h1>
<p>我是小猪课堂,公众号资料分享大师</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aba59ae2575b4a6082bec782cd8c2ade~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
<p>
我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂
我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂
我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂
我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂
</p>
</div>
</body>
实现效果:
从上图中我们可以看到当屏幕大小不断变化时,我们的字体大小以及标题都是在跟着变化的。在上段代码中我们分别给p
标签、h1
标签以及img
标签都使用了clamp
函数,以此来动态设置它们的大小。
我们常见的响应式布局其实就和上图类似了,我们只需要最大最小临界值即可了。
但是我们仔细想一想会发现,我们的设备有很多,比如平板、电脑、手机等等,这个时候就会出现多个首选值VAL
,虽然我们可以利用clamp
函数实现基本的响应式,但是如果想要更加细分每个设备显示为什么样,可能还需要借助max()
、min()
函数了。
比如我们还可以使用clamp
与flex
布局结合的方式实现响应式布局。
总结
clamp()
函数自身是不复杂的,我们学会使用它非常快,但是难点在于我们如何判断一个场景是否可以使用它,这就是需要我们日积月累的经验来决定了。比如说我们需要做手机和电脑端的响应式,那么完全可以利用clamp
函数,当元素宽度小于某个值时,我们的字体、宽度、等等都可以设置为某个值,这就简单的实现了响应式布局。当然实现响应式布局的方式还有很多种,需要大家下来了解了。
如果觉得文章太繁琐或者没看懂,可以观看视频: 小猪课堂