前言

公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（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. 1. Spring相关概念

    1. 初始 Spring ‍ 1.1 Spring 家族 ‍ 官网:​https://spring.io,从官网我们可以大概了解到: Spring 能做什么:用以开发 web.微服务以及分布式系统等, ...

  2. DLang 与 C 语言交互

    DLang 与 C 语言交互 很难受的是,这部分的文档太少了,根本没有 教程向 的文章.所以我写了此文以做分享. 本文原址链接(防止机器搬运):https://www.cnblogs.com/jeef ...

  3. 聊聊 RocketMQ 主从复制

    提到主从复制,我们可能立马会联想到 MySQL 的主从复制. MySQL 主从复制是 MySQL 高可用机制之一,数据可以从数据库服务器主节点复制到一个或多个从节点. 这篇文章,我们聊聊 Rocket ...

  4. 添加.gitignore不生效问题

    1. 解决.gitignore不生效问题 把某些目录或文件加入忽略规则,按照上述方法定义后发现并未生效,原因是.gitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中, ...

  5. Python copy & deeocopy 探究

    简单来说,copy 复制创建新的容器,而引用容器内元素的地址不变.而 deepcopy 也对容器内的容器元素进行复制. 但是这种复制具体是什么体现呢?是否只是对第一层容器元素进行了复制?写了一段代码验 ...

  6. 永远拥抱开放生态 | Metaworld2.0能力发布

    ​ 回看过去的二十年,互联网从门户网站发布信息,用户只能获取阅读:到如今的人人生产内容,再借助各类平台设施上传投递给其他用户.这个过程中,内容生产力的分布从集中转为分散,恰似互联网从1.0走向2.0的 ...

  7. 2023年郑州轻工业大学校赛邀请赛myh

    赛程回顾和赛后总结 赛程回顾 although 昨天刚复盘的,但还是记不住题号.就口胡下是那类型题吧. 刚开始时,我和队长先看的a,让jc去找签到题.我们看了下a,队长说可能dp,但还是感觉没啥思路就 ...

  8. 【go语言】2.4.1 如何导入和使用包

    在 Go 语言中,包(package)是代码的组织方式.每个 Go 程序都由包构成,程序从 main 包开始运行. 导入包 使用 import 关键字可以导入包.导入的包可以是 Go 标准库中的包,也 ...

  9. 重返照片的原始世界：我为.NET打造的RAW照片解析利器

    重返照片的原始世界:我为.NET打造的RAW照片解析利器 如果你是我的老读者,你可能还记得,在2019年,我冒险进入了一片神秘的领域--用C#解析RAW格式的照片: 20191208 - 用.NET解 ...

  10. 如何选择最适合您的Excel处理库？

    摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 GcExcel和POI是两个应用于处理Excel文件的技 ...