前言

公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（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 响应式的更多相关文章

  1. 一行代码搞定 FTP 服务

    环境搭建: python windows/linux pip install pyftpdlib (安装失败请到这里下载:https://pypi.python.org/pypi/pyftpdlib/ ...

  2. 一行代码搞定Adapter

    15年Google I/O大会发不了三个重要支持库 >Material design (Android Support Design) >百分比布局:Percent support lib ...

  3. Asp.Net Core 轻松学-一行代码搞定文件上传 JSONHelper

    Asp.Net Core 轻松学-一行代码搞定文件上传   前言     在 Web 应用程序开发过程中,总是无法避免涉及到文件上传,这次我们来聊一聊怎么去实现一个简单方便可复用文件上传功能:通过创建 ...

  4. 一行代码搞定所有屏幕适配AbViewUtil

    适配原理:抛弃google提供的dip理论与多套图片与布局方案,采用与UI设计师通用的px作为标准单位,原理是将UI设计师的设计图与当前查看的手机或其他设备的屏幕像素尺寸进行换算,得到缩放比例,在Ac ...

  5. 开源作品ThinkJDBC—一行代码搞定数据库操作

    1 简介 ThinkJD,又名ThinkJDBC,一个简洁而强大的开源JDBC操作库.你可以使用Java像ThinkPHP框架的M方法一样,一行代码搞定数据库操作.ThinkJD会自动管理数据库连接, ...

  6. 【springboot+easypoi】一行代码搞定excel导入导出

    原文:https://www.jianshu.com/p/5d67fb720ece 开发中经常会遇到excel的处理,导入导出解析等等,java中比较流行的用poi,但是每次都要写大段工具类来搞定这事 ...

  7. easypoi 一行代码搞定excel导入导出

    开发中经常会遇到excel的处理,导入导出解析等等,java中比较流行的用poi,但是每次都要写大段工具类来搞定这事儿,此处推荐一个别人造好的轮子[easypoi],下面介绍下“轮子”的使用. pom ...

  8. 一行代码搞定WordPress面包屑导航breadcrumb

    有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...

  9. 初识sa-token，一行代码搞定登录授权！

    前言 在java的世界里,有很多优秀的权限认证框架,如Apache Shiro.Spring Security 等等.这些框架背景强大,历史悠久,其生态也比较齐全. 但同时这些框架也并非十分完美,在前 ...

  10. SnackbarUtils:一行代码搞定Snackbar

    此文章是我在简书的文章 http://www.jianshu.com/p/f4ba05d7bbda Snackbar在Android中的使用日益广泛,很大程度上替代了传统的Toast,相比Toast拥 ...

随机推荐

  1. AI室内设计：提升效率、消除沟通障碍，满足客户需求

    前言 免费AI绘图工具:https://www.topgpt.one 随着人工智能(AI)技术的不断发展,室内设计行业也开始受益于这一技术的应用.其中,AI绘画工具在室内设计中的应用正日益受到关注.这 ...

  2. Serverless试飞员的夙愿 | 带您扶摇直上，酣畅淋漓的云上作战

    ​上期博文带您体验了外挂云函数Demo包,感受通过云函数使用云数据库快速突破"音障",进入"长机"云函数+"僚机"云数据库的Serverle ...

  3. 代码随想录贪心专题-day1

    35. 分发糖果 n 个孩子站成一排.给你一个整数数组 ratings 表示每个孩子的评分. 你需要按照以下要求,给这些孩子分发糖果: 每个孩子至少分配到 1 个糖果. 相邻两个孩子评分更高的孩子会获 ...

  4. 2023-08-04：村里面一共有 n 栋房子 我们希望通过建造水井和铺设管道来为所有房子供水。 对于每个房子 i，我们有两种可选的供水方案： 一种是直接在房子内建造水井 成本为 wells[i -

    2023-08-04:村里面一共有 n 栋房子 我们希望通过建造水井和铺设管道来为所有房子供水. 对于每个房子 i,我们有两种可选的供水方案: 一种是直接在房子内建造水井 成本为 wells[i - ...

  5. Redis从入门到放弃（9）：集群模式

    前面文章我们介绍了Redis的主从模式是一种在Redis中实现高可用性的方式,但也存在一些缺点. 1.主从模式缺点 写入单点故障:在主从模式中,写入操作只能在主节点进行,如果主节点宕机,写入将无法执行 ...

  6. 使用supervisor守护Prometheus进程

    使用supervisor守护Prometheus进程 目录 使用supervisor守护Prometheus进程 安装supervisor 安装Prometheus监控系统 配置supervisor ...

  7. 个人用C#编写的壁纸管理器 - 开源研究系列文章

    今天介绍一下笔者自己用C#开发的一个小工具软件:壁纸管理器. 开发这个小工具的初衷是因为Windows操作系统提供的功能个人不满意,而且现在闲着,所以就随意写了个代码.如果对读者有借鉴参考作用就更好了 ...

  8. Unity的AssetPostprocessor之Model之动画：深入解析与实用案例 3

    Unity AssetPostprocessor的Model的动画相关的函数修改实际应用 在Unity中,AssetPostprocessor是一个非常有用的工具,它可以在导入资源时自动执行一些操作. ...

  9. [FlareOn4]login-buu ctf

    打开压缩包 是个html,我直接???? 这不是web弄的吗 离谱了,不过f12还是会的 不过其中的逻辑还是比较清楚的 先用伪代码确定加密逻辑,再直接写直接进行爆破解码 wo cao,wrong!fl ...

  10. 解放双手！ChatGPT助力编写JAVA框架

    亲爱的Javaer们,在平时编码的过程中,你是否曾想过编写一个Java框架去为开发提效?但是要么编写框架时感觉无从下手,不知道从哪开始.要么有思路了后对某个功能实现的技术细节不了解,空有想法而无法实现 ...