最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

一行代码搞定 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%

参考

  • clamp() - CSS: Cascading Style Sheets | MDN
  • Responsive Font Size (Optimal Text at Every Breakpoint)

关键词: