CSS魔法！如何将任意CSS类型转换为数值？

news2024/12/23 17:21:40

在 CSS 中有各式各样的类型值，例如 1rem、10vw、100cqw等等，这些相对值给与了 CSS 强大的适应能力。但有时候，我们还需要知道这些相对值所对应的真实值，也就是px值，比如在移动端，我们经常会设置这样的根字号：

:root{
  font-size: max(12px, min( 12px + (100vw - 320px) / 55 * 4, 20px ));
}
p{
  font-size: 2rem;
}

那么，p此时的真实px值应该是多少呢？

在以往，我们只能通过 JS去获取，但是现在，仅仅凭 CSS也能做到，一起了解一下吧！

一、CSS 三角函数

从理论上来讲，将一个长度除以1px就应该得到具体的数值，相当于将这个长度以1px被分成了多少份。

2rem / 1px

但是，大家可能都知道，calc在进行除法运算时，除数是不能带单位的。

calc(2rem / 1px) /*不合法*/

不排除浏览器以后会支持。

不过现在终于迎来了转机，在 Chrome 111中，CSS 新增了一系列三角函数。

  • sin()[1]：正弦
  • cos()[2]：余弦
  • tan()[3]：正切
  • asin()[4]：反正弦
  • acos()[5]：反余弦
  • atan()[6]：反正切
  • atan2()[7]：反正切

这里我们不聊三角函数的作用，只是作为一个桥梁中转一下。

关于「正切函数」，这里简单回顾一下高中数学

在「直角三角形」中，其中一个锐角的「对边」和「临边」的比值就是这个角的「正切值」，「反正切」就是通过两条直角边反向去求出该角的「弧度值」，示意如下：

这些函数本身没什么特别的，业界通用，但有一个非常例外，那就是atan2，它和atan作用是一样的，都是反正切函数。唯一的区别是，atan2支持两个值

前端中的 atan 就是数学中的 arctan。

atan2(y, x)

例如：

transform: rotate(atan2(3, 2));
/*等同于*/
transform: rotate(atan(1.5));

看似好像没啥意义，直接用tan不就好了？

transform: rotate(atan2(3/2));

和JS不同的是，CSS 中还能「支持单位」，如下：

transform: rotate(atan2(1rem, 20px));
/*等同于?*/

这就不得了了，如果此时的1rem是16px，那么浏览器会根据1rem的真实长度和20px做对比，相当于让两个带单位的长度做除法运算。

也就是说，y/x的值可以得到两个CSS长度之间的真实比值，而无需额外转换。

然后，通过正切函数tan将括号里面的值解析出来。

tan(atan2(1rem, 20px)) /*.8*/

这一点其实在 JS 中也可以验证一下，只是 CSS 可以带单位的值。

如果将后面的值设置为1px，就相当于把任意长度按照1px进行切分，也就得到了任意长度的px数值，如下：

tan(atan2(1rem, 1px)) /*16*/

有了这个不带单位的绝对值，我们就可以做很多事情了，下面举几个例子。

二、CSS 获取当前字号

回到文章开头的问题，如何通过 CSS 获取当前字号呢？

根据上一节的原理，只要通过tan（） 和 atan2（）就可以将任意长度转换为数值了。

:root{
  font-size: max(12px, min( 12px + (100vw - 320px) / 55 * 4, 20px ));
}
body{
  --px-font: tan(atan2(1rem, 1px));
}

这样--px-font就得到了真实的px数值。

然后，我们还可以借助 CSS计数器，将这个数字渲染到页面。

body::after{
  counter-reset: font var(--px-font);
  content: "当前根字号：" counter(font);
}

结果...效果如下：

好像不太对？貌似是浏览器的 bug，这种情况下忽略了tan(atan2(1rem, 1px))中的1rem单位。

要修复这个问题其实很容易，需要通过@property定义一个CSS变量，类型为长度，然后将需要计算的值赋给这个变量，如下：

@property --font {
  syntax: "<length>";
  initial-value: 1px;
  inherits: false;
}
:root{
  font-size: max(12px, min( 12px + (100vw - 320px) / 55 * 4, 20px ));
}
body::after{
  --font: 1rem; /*定义好的CSS变量*/
  --px-font: tan(atan2(var(--font), 1px));
  counter-reset: font var(--px-font);
  content: "当前根字号：" counter(font);
}

这样就正常了，在改变屏幕尺寸时会自动渲染出当前字号。

你也可以访问在线链接

  • CSS font-size (juejin.cn)[8]
  • CSS font-size (codepen.io)[9]

三、实时显示容器尺寸

CSS容器查询中出现了几个新的尺寸单位。这里只介绍下面两种。

关于容器查询，可以参考这篇文章：介绍2022最期待且已正式支持的CSS container容器查询 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)，本文并不涉及具体容器查询语句。

  • 「cqw」 容器查询宽度（Container Query Width）占比。「1cqw等于容器宽度的1%」。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。
  • 「cqh」 容器查询高度（Container Query Height）占比。「1cqh等于容器高度的1%」。

利用前面的技巧，可以将cqw、cqh这些单位转换为具体的px值。

假设有这样一个容器。

.box{
  display: grid;
  place-content: center;
  width: 200px;
  height: 200px;
  background-color: #fff;
}

为了使容器尺寸生效，必须声明容器类型。

.box{
  /**/
  container-type: size;
}

然后用同样的技巧，在伪元素中通过计数器将宽高渲染出来。

.box::before{
  --w: 100cqw;
  --h: 100cqh;
  --px-width: tan(atan2(var(--w), 1px));
  --px-height: tan(atan2(var(--h), 1px));
  counter-reset: w var(--px-width) h var(--px-height);
  content: counter(w) " x " counter(h);
}

别忘了修复 bug。

@property --w {
  syntax: "<length>";
  initial-value: 100px;
  inherits: false;
}
@property --h {
  syntax: "<length>";
  initial-value: 100px;
  inherits: false;
}

效果如下，完全没有任何 JS。

你也可以访问在线链接

  • CSS resize (juejin.cn)[10]
  • CSS resize (codepen.io)[11]

四、自适应文本的头像

下面看一个自适应文本的头像，当文本较多时，会自动缩放，让文本可以完整展示，如下

原理其实是通过容器尺寸的映射关系来动态设置文本大小，关键实现如下：

.avator-container span {
  font-size: calc( 24px - 10cqw );
}

但是，通过文字大小来缩放有一个限制，在PC上，一般会有最小字号限制（通常是12号），所以更好的方式应该是通过scale来实现。

现在，我们可以通过上面的技巧，将容器尺寸转换成scale能够识别的数值，通过文本宽度和容器尺寸的比值来确实缩放比例，关键实现如下：

.avator-container span {
  --w: 100cqw;
  --scale: tan(atan2(30px, var(--w)));
  transform: scale(var(--scale));
}

这样就得到了完全自适应尺寸的文本头像了。

完整代码可以访问在线链接

  • CSS auto text avator (juejin.cn)[12]
  • CSS avator auto scale (codepen.io)[13]

五、总结一下

以上就是本文的全部内容了，介绍了一个非常巧妙并且有用的 CSS 小技巧，下面总结一下

  • CSS 有很多类型的尺寸，这些尺寸给与了 CSS 强大的适应能力。
  • 从理论上讲，将一个长度除以 1px 就可以得到具体的数值，但是calc不支持。
  • CSS 反正切函数 atan2(y,x) 支持两个参数，并且还支持带CSS单位。
  • 通过 tan(atan2(y,x))可以得到y/x的比值，如果x是1px，可以得到y的实际px值。
  • 利用这个技巧，可以将任意类型值转换为数值。
  • 纯数值可以在各个地方都可以使用了，比如scale(var(--n))，如果需要 px，直接calc(var(--n) * 1px )。

参考资料：

[1]sin()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/sin。

[2]cos()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/cos。

[3]tan()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/tan。

[4]asin()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/asin。

[5]acos()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/acos。

[6]atan()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/atan。

[7]atan2()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/atan2。

[8]CSS font-size (juejin.cn)： https://code.juejin.cn/pen/7289041195483791416。

[9]CSS font-size (codepen.io)： https://codepen.io/xboxyan/pen/XWoObZX。

[10]CSS resize (juejin.cn)： https://code.juejin.cn/pen/7289046442864279591。

[11]CSS resize (codepen.io)： https://codepen.io/xboxyan/pen/MWZLYZz。

[12]CSS auto text avator (juejin.cn)： https://code.juejin.cn/pen/7289095309752270906。

[13]CSS avator auto scale (codepen.io)： https://codepen.io/xboxyan/pen/qBLLexW。

来源：前端侦探

最后，推荐一款应用开发神器

扯个嗓子！关于目前低代码在技术领域很活跃！

低代码是什么？一组数字技术工具平台，能基于图形化拖拽、参数化配置等更为高效的方式，实现快速构建、数据编排、连接生态、中台服务等。通过少量代码或不用代码实现数字化转型中的场景应用创新。它能缓解甚至解决庞大的市场需求与传统的开发生产力引发的供需关系矛盾问题，是数字化转型过程中降本增效趋势下的产物。

这边介绍一款好用的低代码平台——JNPF快速开发平台。近年在市场表现和产品竞争力方面表现较为突出，采用的是最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue3）。代码生成器依赖性低，灵活的扩展能力，可灵活实现二次开发。

以JNPF为代表的企业级低代码平台为了支撑更高技术要求的应用开发，从数据库建模、Web API构建到页面设计，与传统软件开发几乎没有差异，只是通过低代码可视化模式，减少了构建“增删改查”功能的重复劳动，还没有了解过低代码的伙伴可以尝试了解一下。

应用：https://www.jnpfsoft.com/?csdn

有了它，开发人员在开发过程中就可以轻松上手，充分利用传统开发模式下积累的经验。所以低代码平台对于程序员来说，有着很大帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1098282.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

实验四：回溯算法的设计与分析

实验四：回溯算法的设计与分析

某不知名学校大二算法课实验报告 题目来自力扣 第一题&#xff1a;幂集 力扣题目链接&#xff1a;幂集 题目描述&#xff1a; 幂集。编写一种方法&#xff0c;返回某集合的所有子集。集合中不包含重复的元素。 说明&#xff1a;解集不能包含重复的子集。 示例: 输入&#xf…
阅读更多...
2023年中国TFT－LCD面板产业链、需求量及市场规模分析[图]

2023年中国TFT－LCD面板产业链、需求量及市场规模分析[图]

按显示技术尺寸来分&#xff0c;主要分为大尺寸和小尺寸&#xff08;10寸以下&#xff09;&#xff0c;TFT-LCD行业下游主要是各类型消费电子&#xff0c;包括PC显示器&#xff0c;液晶电视&#xff0c;智能手机等。 TFT&#xff0d;LCD面板产业链 资料来源&#xff1a;共研产…
阅读更多...
使用simpleperf跟踪自定义的perf events

使用simpleperf跟踪自定义的perf events

目录 前言 tracepoint简介 添加tracepoint&#xff1a; 使用simpleperf 跟踪自定义的tracepoint 前言 simpleperf可以跟踪指定的perf events&#xff0c;通过adb shell & simpleperf list可以查看当前设备支持的所有perf event。但是如果这些perf event不能满足我们的…
阅读更多...
深入理解操作系统之线程

深入理解操作系统之线程

目录 补充进程知识&#xff1a; 是什么触发了进程的切换&#xff1f; 进程切换时要做什么&#xff1f; 切换进程的时机分为主动和被动。 进程上下文指的是什么&#xff1f; 线程篇&#xff1a; 以进程创建子进程为例引入线程&#xff1a; 线程定义&#xff1a; Motivat…
阅读更多...
Spring Cloud Alibaba—Sentinel 控制台安装

Spring Cloud Alibaba—Sentinel 控制台安装

1、Sentinel 控制台包含如下功能: 查看机器列表以及健康情况&#xff1a;收集 Sentinel 客户端发送的心跳包&#xff0c;用于判断机器是否在线。 监控 (单机和集群聚合)&#xff1a;通过 Sentinel 客户端暴露的监控 API&#xff0c;定期拉取并且聚合应用监控信息&#xff0c;最…
阅读更多...
实验室超声波清洗器如何选择？

实验室超声波清洗器如何选择？

实验室是很多科研人员工作的地方&#xff0c;而且他们的工作环境较为特殊&#xff0c;与一般的工作环境有所不同&#xff0c;在大多数实验过程后会通常都会需要使用到效率高实验室超声波清洗机&#xff0c;而且其清洁效率也要比普通的清洗机高。不同实验室会对实验室超声波清洗…
阅读更多...
记一次密码重置到后台GetShell

记一次密码重置到后台GetShell

1.尝试登录 打开网页&#xff0c;看到一个登录&#xff0c;尝试点击 2.发现提示 Unknown host 3.因为刚开始是用 IP 访问的网站&#xff0c;点击登录按钮为域名访问该网站&#xff0c;猜测可能使用域名访问不了&#xff0c;于是把域名改为IP加上后... 1.尝试登录 1.打开网页&…
阅读更多...
ITextRenderer将PDF转换为HTML详细教程

ITextRenderer将PDF转换为HTML详细教程

引入依赖 <dependency><groupId>org.xhtmlrenderer</groupId><artifactId>flying-saucer-pdf-itext5</artifactId><version>9.1.18</version></dependency> 问题一&#xff1a;输出中文字体 下载字体simsun.ttc 下载链接&am…
阅读更多...
动态规划：09 0-1背包理论基础I

动态规划：09 0-1背包理论基础I

动态规划&#xff1a;09 0-1背包理论基础I 背包问题概述 对于面试的话&#xff0c;其实掌握01背包&#xff0c;和完全背包&#xff0c;就够用了&#xff0c;最多可以再来一个多重背包。 如果这几种背包&#xff0c;分不清&#xff0c;就看下图 leetcode上连多重背包的题目都…
阅读更多...
【MATLAB-Retinex图像增强算法的去雾技术】

【MATLAB-Retinex图像增强算法的去雾技术】

续&#xff1a;【MATLAB-基于直方图优化的图像去雾技术】 【MATLAB-Retinex图像增强算法的去雾技术】 1 原图2 MATLAB实现代码3 结果图示 参考书籍&#xff1a;计算机视觉与深度学习实战:以MATLAB、Python为工具&#xff0c; 主编&#xff1a;刘衍琦, 詹福宇&#xff0c; 王德建…
阅读更多...
C++入门篇(3)---引用

C++入门篇(3)---引用

1.引用 你有没有被人起过外号?比如身边的朋友,喊他的时候不会叫他的全名,像我很好的朋友,我一般都喜欢叫他"阿威",而不会去称呼全名.我叫他"阿威",他还是他没有什么问题. 这里新登场的引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&am…
阅读更多...
学会这招，轻松掌握学校教学质量！

学会这招，轻松掌握学校教学质量！

在教育领域&#xff0c;教育管理者和学校管理员需要确保教学过程的质量和效率。在线巡课系统是一种强大的工具&#xff0c;可以帮助他们实时监测教学过程、教师绩效和学生学习情况。 在线巡课系统结合了技术和教育的最佳实践&#xff0c;为学校提供了数据驱动的决策支持和资源管…
阅读更多...
SGPT: GPT Sentence Embeddings for Semantic Search

SGPT: GPT Sentence Embeddings for Semantic Search

简介 语义搜索分为两个部分&#xff1a; 1.搜索和query 相关的topk文档。 2.理解文档和query后面隐藏的语义信息&#xff0c;而不是字面含义。 这篇论文提出了SGPT模型&#xff0c;只用decoder-only的transformer来进行语义搜索和sentence向量的提取。 1.SGPT-BE&#xff1a;来…
阅读更多...
有什么手机软件能分离人声和音乐？

有什么手机软件能分离人声和音乐？

很多人在制作混剪视频&#xff0c;需要二次创作的时候&#xff0c;就经常会把人声分离、背景音乐伴奏提取出来&#xff0c;然后重新加入自己的创意跟想法。下面就一起来看看如何用手机软件分离人声和音乐的吧&#xff01; 音分轨 一款可以分离人声和背景音乐的手机软件&#x…
阅读更多...
我才35岁就要面临“人到中年不服老不行”？大龄测试的救赎之路就在其中！

我才35岁就要面临“人到中年不服老不行”？大龄测试的救赎之路就在其中！

人说“三十而立”&#xff0c;可对于测试来说是“三十而秃”&#xff0c;除了日常秃头&#xff0c;而立之年的测试们的开始焦虑自己的职业未来。 自2017年华为传出“清理35岁以上员工”以来&#xff0c;各企业关于“劝退 35 岁以上员工”、“招聘限 35 岁以下”的传闻此起彼伏…
阅读更多...
前端数据可视化之【Echarts介绍】

前端数据可视化之【Echarts介绍】

目录 &#x1f31f;前言&#x1f31f;丰富的可视化类型&#x1f31f;多种数据格式无需转换直接使用&#x1f31f;移动端优化&#x1f31f;多渲染方案&#xff0c;跨平台使用&#xff01;&#x1f31f;写在最后 &#x1f31f;前言 ECharts开源来自百度商业前端数据可视化团队&a…
阅读更多...
数据类型转换

数据类型转换

一.应用函数或者方法 1.cast 函数 cast&#xff08;变量 as 数据类型&#xff09; 语义&#xff1a;将变量转为这个类型 2. 变量 ::数据类型 将变量转化为xx类型 3.to_date函数 to_date&#xff08;字符串&#xff0c;format&#xff09; 语义&#xff1a;转换成日期类…
阅读更多...
运用精益管理思想提升MES管理系统建设水平

运用精益管理思想提升MES管理系统建设水平

随着制造业的不断发展&#xff0c;MES生产管理系统已经成为了企业生产过程中不可或缺的一部分。而在MES管理系统建设过程中&#xff0c;精益管理的思想也越来越受到重视。本文将探讨如何运用精益管理的思想&#xff0c;提高MES系统的建设水平&#xff0c;以更好地服务于企业的生…
阅读更多...
故障诊断实验台 | PT600电机电气故障实验台

故障诊断实验台 | PT600电机电气故障实验台

很多同学因为实验数据而被困扰&#xff0c;目前数据来源有3方面&#xff0c;公开实验数据集、校企合作项目实际数据、自制实验台数据。 公开实验数据集被用烂了&#xff0c;容易被审稿人质疑&#xff1b; 校企合作项目实际数据缺少故障数据&#xff0c;数据需保密&#xff0c;…
阅读更多...
SDK和API区别

SDK和API区别

B站视频&#xff1a;https://www.bilibili.com/video/BV1dA411K7Ps/?spm_id_from333.337.search-card.all.click&vd_source85701dd8aeeae2aaac0299ea796f19bb 假设你在开发一款移动端兽医诊所应用 Lets say youre developing a mobile app for a veterinarian clinic 想法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023