定义和用法
font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
前言
公司要做大屏,但是大屏还要有个嵌在系统的版本,屏幕(iframe)小了但字体大了怎么办。网上找了很多代码都很长,个人参考了资料后实现了一个一行代码 font-size
响应式。
TL;DR
html { font-size: clamp(12px, calc(7px + 0.390625vw), 24px); }
解释
- 在
标签中定义是为了定义全局字体基准大小,目前开发几乎所有的字体都用
rem
作为单位,而rem
单位代表的是全局字体大小的多少倍,所以只要设置全局大小整个页面所有rem
都会跟着相应。 -
clamp
三个参数分别是最小值、相对值和最大值,如果相对值小于最小值则返回最小值,如果相对值在最大值最小值之间则返回相对值,如果相对值大于最大值则返回最大值。这样就限定了可缩放大小的范围。 -
calc(7px + 0.390625vw)
则代表自起始值开始,根据屏幕变化量增加像素数,0.390625vw
的公式是(最大屏幕字体大小-最小屏幕字体大小)/(最大屏幕宽度-最小屏幕宽度) * 100
,当然不乘100
可以使用0.00390625%
参考
到此这篇关于一行代码搞定 font-size 响应式的文章就介绍到这了,更多相关font-size 响应式内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!