首页 前端知识 文字(自适应)屏幕宽度

文字(自适应)屏幕宽度

2024-08-18 00:08:30 前端知识 前端哥 10 374 我要收藏

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是根据屏幕高度来进行缩放。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15940.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!