文字(自适应)屏幕宽度

文章介绍了在前端开发中,如何利用CSS的calc属性和视窗单位(vw)来实现字体大小随屏幕宽度自适应调整的方法。通过calc函数,可以避免固定尺寸或rem、em单位的不便,确保字体在不同分辨率下保持合适的大小。
摘要由CSDN通过智能技术生成

1.前端在写项目的时候要做到自适应屏幕宽比,在字体用到绝对尺寸时,字体不会随窗口变化而变化。用到rem,em时感觉又不方便。利用css的calc属性,这个方法比较简单。

方法:

这里的vw是视窗宽度,15是15px绝对尺寸,2240就是自己屏幕的宽度,可以按照需求写。calc:是一个css自带的计算方法,可以自动计算后返回px单位的值。

font-size:calc( 100vw * 20 / 2240);

我们的需求是文字大小是25px,而我们的屏幕是2240*1400,这时就可以将设置25px。

font-size:calc( 100vw * 25 / 2240);

 这个只会根据屏幕宽度来进行字体的放大缩小,将vw换成vh是根据屏幕高度来进行缩放。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值