标签搜索
隐藏侧边栏

响应式文字”完美“解决方案-clamp

搞前端的半夏
2022-05-10 / 0 评论 / 0 点赞 / 123 阅读 / 1,202 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

在做响应式网站的时候,我们经常需要考虑的是文字的大小,图片的宽高,盒子的大小等等!对于我个人来说,我是经常使用rem,rem,vh,vw等等响应式单位的。而对于文字的大小,我使用最多的是rem和vw。rem是相对于根元素的大小,vw是相对于视口宽度的大小。

文字响应式

考虑下面的场景:

网站中存在标题,在不同的设备下需要显示不同的大小。

之前我的方法是这样的:

方案1-rem

第一反应我是使用rem.

h1{
	font-size:2rem;
}

这样写法的带来的问题是,由于rem是相对于根元素的,所以无论你的视口怎么变化,字体大小其实一直是保持不变的。

那么我们就需要使用媒体查询,根据不同设备的大小,动态的调整跟根元素字体的大小。

例如:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  html{
    font-size:**px;
  }
}

这应该算是一种完美的解决方案了,不过如果要考虑的设备比较多,或者划分的尺寸比较细,就要写很多css代码

方案二-vw

我们不考虑媒体查询的情况下,如果根据视口的宽度去调整字体的大小的话,那我就考虑使用vw了,wv是完全根据视口的宽度来设置值的。

h1{
  font-size:7vw;
}

不过这中实现方案,虽然可以动态的调整文字的大小,但是也可能会出现极端的情况,那就是文字非常高大或者非常小。此时我们的clamp()登场了!

clamp()

引用

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。


语法

clamp(最小值,首选值,最大值);

  • 当首选值小于最小值时,使用最小值。

  • 当首选值介于最小值和最大值之间时,使用首选值。

  • 当首选值大于最大值时,使用最大值。

对于上面h1的例子,我们可以这样写:

h1{
font-size:clamp(2rem,7vw,4rem);
}

当7vw换算成px的值小于2rem换算的px时,此时h1的字体的大小就是2rem。总之h1的大小总会是在2rem,7vw,和4rem之间的。

有人说h1,那不就是这三个值其中的一个吗?三个值也能叫响应式。如果你有这种想法,你就错了!!!首先,如果根元素的字体大小是固定的话,2rem,4rem也是固定的,但是7vw却是千遍万化的。如果你再将根元素合理的动态设置文字大小的话,那我我相信clamp将会超越使用媒体查询设置字体大小!

0

评论区