前言

公司要做大屏，但是大屏还要有个嵌在系统的版本，屏幕（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. 前端基于原生input组件的增强简单通用实用输入框

    前端基于原生input组件的增强简单通用实用输入框,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12799 效果图如下:   ...

  2. LLE算法在自然语言生成中的应用：实现文本到语音的情感迁移

    目录 自然语言生成(Natural Language Generation,NLP)是人工智能领域的一个分支,它利用大量的文本数据训练出语言模型,从而实现对自然语言的生成和理解.在NLP中,情感迁移( ...

  3. 从AWS中学习如何使用AmazonDynamoDB存储卷

    目录 <35. <从 AWS 中学习如何使用 Amazon DynamoDB 存储卷>>:从 AWS 中学习如何使用 Amazon DynamoDB 存储卷 随着云计算技术的迅 ...

  4. JavaCV的摄像头实战之十二：性别检测

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...

  5. 「学习笔记」KMP 算法

    前置知识 前缀 是指从串首开始到某个位置 \(i\) 结束的一个特殊子串. 真前缀 指除了 \(S\) 本身的 \(S\) 的前缀. 举例来说, 字符串 abcabeda 的所有前缀为 {a, ab, ...

  6. Hexo博客Next主题阅读次数热度不能读取的问题，报错Counter not initialized! More info at console err msg.

    加入valine在线评论 设置效果: 设置方法: 首先要先去LeanCloud注册一个帐号.然后再创建一个应用. 拿到appid和appkey之后,打开themes/next/_config.yml主 ...

  7. PaddleSharp：跨越一年的版本更新与亮点

    PaddleSharp:跨越一年的版本更新与亮点 我始终坚信,开源社区是技术进步的重要推动力,也是我抽出我业余时间,投入到PaddleSharp这个项目的原因,这个项目充分展现了.NET在复杂计算领域 ...

  8. 渗透-02：HTTPS主干-分支和HTTPS传输过程

    一.HTTPS主干-分支 第一层 第一层,是主干的主干,加密通信就是双方都持有一个对称加密的秘钥,然后就可以安全通信了. 问题就是,无论这个最初的秘钥是由客户端传给服务端,还是服务端传给客户端,都是明 ...

  9. SpringCloudAlibaba框架学习

    遇到问题找了各种办法都没有解决,就reload maven,再不行就重启idea,重启电脑.(有奇效,我好几次就这么解决的,可能是我电脑配置太拉了) 注册中心 - Nacos 配置文件优先级:本地配置 ...

  10. CF-1860C Game on Permutation题解

    题意:在一条数轴上,Alice可以跳到在你所在点前面且值比当前所在点小的点.每回合可以向任意符合要求的点跳一次.当轮到Alice的回合同时不存在符合要求的点,Alice就赢了.Alice可以选择一个点 ...