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

举报
搞前端的半夏 发表于 2021/12/07 23:03:59 2021/12/07
【摘要】 大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~.点我探索新世界! 前言在做响应式网站的时候,我们经常需要考虑的是文字的大小,图片的宽高,盒子的大小等等!对于我个人来说,我是经常使用rem,rem,vh,vw等等响应式单位的。而对于文字的大小,我使用最多的是r...

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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将会超越使用媒体查询设置字体大小!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200