一行代码搞定 font-size 响应式
发布时间:2023-05-09 15:23:55 作者:Aoba_xu 我要评论
这篇文章主要介绍了一行代码搞定 font-size 响应式,该属性设置元素的字体大小,font-size 属性可设置字体的尺寸,本文给大家介绍的非常详细,需要的朋友可以参考下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
定义和用法
font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
前言
公司要做大屏,但是大屏还要有个嵌在系统的版本,屏幕(iframe)小了但字体大了怎么办。网上找了很多代码都很长,个人参考了资料后实现了一个一行代码 font-size
响应式。
TL;DR
html { font-size: clamp(12px, calc(7px + 0.390625vw), 24px); }
解释
- 在
<html>
标签中定义是为了定义全局字体基准大小,目前开发几乎所有的字体都用rem
作为单位,而rem
单位代表的是全局字体大小的多少倍,所以只要设置全局大小整个页面所有rem
都会跟着相应。 clamp
三个参数分别是最小值、相对值和最大值,如果相对值小于最小值则返回最小值,如果相对值在最大值最小值之间则返回相对值,如果相对值大于最大值则返回最大值。这样就限定了可缩放大小的范围。calc(7px + 0.390625vw)
则代表自起始值开始,根据屏幕变化量增加像素数,0.390625vw
的公式是(最大屏幕字体大小-最小屏幕字体大小)/(最大屏幕宽度-最小屏幕宽度) * 100
,当然不乘100
可以使用0.00390625%
参考
到此这篇关于一行代码搞定 font-size 响应式的文章就介绍到这了,更多相关font-size 响应式内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!
相关文章
css中一些常用的font-size字体单位和line-height详解
这篇文章主要介绍了css中一些常用的font-size字体单位和line-height的相关知识,给大家提到了px(pixel)像素的一些小知识,本文通过实例代码相结合给大家介绍的非常详细,感2020-05-20详解使用 CSS 的 font-size-adjust 属性改善网页排版
本篇文章主要介绍了使用 CSS 的 font-size-adjust 属性改善网页排版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-09-18- 这篇文章主要介绍了CSS中的font-size属性使用教程,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-13
- 这篇文章主要介绍了CSS的font-size属性及其em值的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-05
CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
这篇文章主要介绍了CSS Font-Size: em、 px 、pt 、Percent之间的关系及换算,本篇整理的还是比较详细的,需要的朋友可以参考下2014-05-15- CSS的字体样式设置相信许多人再熟悉不过,其实字体样式的设置并不仅仅限于我们平时常用的那几个属性,本文为您详细叙述 font-size 的字体样式设置的详细属性。2009-08-29
最新评论