當前位置：首頁 > 科技 > 軟件

CSS魔法！如何將任意CSS類型轉換為數值？

來源：責編：時間：2023-10-16 17:08:45 283觀看

導讀在 CSS 中有各式各樣的類型值，例如 1rem、10vw、100cqw等等，這些相對值給與了 CSS 強大的適應能力。但有時候，我們還需要知道這些相對值所對應的真實值，也就是px值，比如在移動端，我們經常會設置這樣的根字號：:root{ font-si

在 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做對比，相當于讓兩個帶單位的長度做除法運算。

/*等同于*/transform: rotate(atan(.8)); /* 16px / 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。

本文鏈接：http://www.tebozhan.com/showinfo-26-13603-0.htmlCSS魔法！如何將任意CSS類型轉換為數值？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java設計原則與代碼重構：提高可維護性

下一篇：為什么 HTTP/3 正在吞噬世界

標簽：

熱門焦點

谷歌KDD'23工作：如何提升推薦系統Ranking模型訓練穩定性

谷歌在KDD 2023發表了一篇工作，探索了推薦系統ranking模型的訓練穩定性問題，分析了造成訓練穩定性存在問題的潛在原因，以及現有的一些提升模型穩定性方法的不足，并提出了一種新
JavaScript學習 -AES加密算法

引言在當今數字化時代，前端應用程序扮演著重要角色，用戶的敏感數據經常在前端進行加密和解密操作。然而，這樣的操作在網絡傳輸和存儲中可能會受到惡意攻擊的威脅。為了確保數據
Python異步IO編程的進程/線程通信實現

這篇文章再講3種方式，同時講4中進程間通信的方式一、 Python 中線程間通信的實現方式共享變量共享變量是多個線程可以共同訪問的變量。在Python中，可以使用threading模塊中的L
馮提莫簽約抖音公會前“斗魚一姐”消失在直播間

來源：直播觀察提起“馮提莫”這個名字，很多網友或許聽過，但應該不記得她是哪位主播了。其實，作為曾經的“斗魚一姐”，馮提莫在游戲直播的年代影響力不輸于現
小米MIX Fold 3配置細節曝光：搭載領先版驍龍8 Gen2+罕見5倍長焦

這段時間以來，包括三星、一加、榮耀等等有不少品牌旗下的最新折疊屏旗艦都得到了不少爆料，而小米新一代折疊屏旗艦——小米MIX Fold 3此前也屢屢被傳
華為Mate 60保護殼曝光：碩大后置相機模組凸起程度有驚喜

這段時間以來，關于華為新旗艦的爆料日漸密集。據此前多方爆料，今年華為將開始恢復一年雙旗艦戰略，除上半年推出的P60系列外，往年下半年的Mate系列也將
iQOO Neo8系列新品發布會

旗艦雙芯更強更Pro
聯想的ThinkBook Plus下一版曝光，鍵盤旁邊塞個平板

ThinkBook Plus 是聯想的一個特殊筆記本類別，它在封面放入了一塊墨水屏，也給人留下了較為深刻的印象。據有人爆料，聯想的下一款 ThinkBook Plus 可能更特殊，它
DRAM存儲器10月價格下跌，NAND閃存本月價格與上月持平

10月30日，據韓國媒體消息，自今年年初以來一直在上漲的 DRAM 存儲器的交易價格僅在本月就下跌了近 10％，此次是全年首次降價，而NAND 閃存本月價格與上月持平。市

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

CSS魔法！如何將任意CSS類型轉換為數值？

一、CSS 三角函數

二、CSS 獲取當前字號

三、實時顯示容器尺寸

四、自適應文本的頭像

五、總結一下

谷歌KDD'23工作：如何提升推薦系統Ranking模型訓練穩定性

JavaScript學習 -AES加密算法

Python異步IO編程的進程/線程通信實現

馮提莫簽約抖音公會前“斗魚一姐”消失在直播間

小米MIX Fold 3配置細節曝光：搭載領先版驍龍8 Gen2+罕見5倍長焦

華為Mate 60保護殼曝光：碩大后置相機模組凸起程度有驚喜

iQOO Neo8系列新品發布會

聯想的ThinkBook Plus下一版曝光，鍵盤旁邊塞個平板

DRAM存儲器10月價格下跌，NAND閃存本月價格與上月持平

最新推薦

猜你喜歡

熱門推薦

相關資訊