前言

公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（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. Subset Sum 问题单个物品重量限制前提下的更优算法

    前言 看了 ShanLunjiaJian 关于这个问题的文章,是完全没看懂,沙东队爷的中枢神经内核配置把我偏序了.叉姐在下面提了个论文,论文找不到资源,谁搞到了可以 Q 我一份之类的拜谢了.然后找到了 ...

  2. PHP如何获取短网址跳转之前的网址？

    现在有很多的短网址应用,点击就跳转到缩短之前的网址了,那今天我们就来看一下,PHP如何**短网址跳转之前的网址,其实也很简单,就是用php的get_headers 函数,取得Response Head ...

  3. java BigDecimal解决浮点数的精度丢失和大数计算问题

    java BigDecimal解决浮点数的精度丢失和大数计算问题 抛出浮点数问题: 先考个题,输入什么? System.out.println(0.1 + 0.2); 答案:0.30000000000 ...

  4. C语言。格式化符号

    %s 输出字符串 %d 输出整形数字 %f 输出浮点数数字 %c 输出字符 %x 输出16进制 %04d 输出长度固定的整形数字(0001,0002,....)

  5. Python爬虫实战之提高CSDN访问量

    python爬虫之建立代理池(一)_CodingInCV的博客-CSDN博客 python爬虫之建立代理池(二)_CodingInCV的博客-CSDN博客 前面2篇分别介绍了从2个免费代理网站爬取免费 ...

  6. Linux: rsyslog.conf 配置

    refer to: https://www.debian.org/doc/manuals/debian-handbook/sect.syslog.en.html 日志子系统 Each log mess ...

  7. Linux 软件包：添加repo、升级内核、编译内核、交叉编译

    添加 repo 增加 xxx.repo 文件 在/etc/yum.repos.d/目录下创建 add_openeuler_repo.repo 文件 [add_repo] name=add_repo b ...

  8. Codeforces Round #888 (Div. 3) A-G

    比赛链接 A 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool solve() { i ...

  9. 策略模式+Spring配置类优化多if..else思路

    图示 1. 现状 场景: 假设设备上报不同类型的消息,我们要对不同类型的消息做不同的处理.如果我们通过if..else的方式处理的话会显得比较冗余. 例如: if("alarmEvent&q ...

  10. Pandas：在DataFrame中添加一行，并设置行索引

    解决方案 效果图 参考链接 https://blog.csdn.net/Caiqiudan/article/details/107788525