在 CSS 中有各式各樣的類型值，例如 1rem、10vw、100cqw等等，這些相對(duì)值給與了 CSS 強(qiáng)大的適應(yīng)能力。但有時(shí)候，我們還需要知道這些相對(duì)值所對(duì)應(yīng)的真實(shí)值，也就是px值，比如在移動(dòng)端，我們經(jīng)常會(huì)設(shè)置這樣的根字號(hào)：

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

那么，p此時(shí)的真實(shí)px值應(yīng)該是多少呢？

在以往，我們只能通過 JS去獲取，但是現(xiàn)在，僅僅憑 CSS也能做到，一起了解一下吧！

一、CSS 三角函數(shù)

從理論上來講，將一個(gè)長(zhǎng)度除以1px就應(yīng)該得到具體的數(shù)值，相當(dāng)于將這個(gè)長(zhǎng)度以1px被分成了多少份。

2rem / 1px

但是，大家可能都知道，calc在進(jìn)行除法運(yùn)算時(shí)，除數(shù)是不能帶單位的。

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

不排除瀏覽器以后會(huì)支持。

不過現(xiàn)在終于迎來了轉(zhuǎn)機(jī)，在 Chrome 111中，CSS 新增了一系列三角函數(shù)。

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

這里我們不聊三角函數(shù)的作用，只是作為一個(gè)橋梁中轉(zhuǎn)一下。

關(guān)于「正切函數(shù)」，這里簡(jiǎn)單回顧一下高中數(shù)學(xué)

在「直角三角形」中，其中一個(gè)銳角的「對(duì)邊」和「臨邊」的比值就是這個(gè)角的「正切值」，「反正切」就是通過兩條直角邊反向去求出該角的「弧度值」，示意如下：

這些函數(shù)本身沒什么特別的，業(yè)界通用，但有一個(gè)非常例外，那就是atan2，它和atan作用是一樣的，都是反正切函數(shù)。唯一的區(qū)別是，atan2支持兩個(gè)值

前端中的 atan 就是數(shù)學(xué)中的 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));
/*等同于?*/

這就不得了了，如果此時(shí)的1rem是16px，那么瀏覽器會(huì)根據(jù)1rem的真實(shí)長(zhǎng)度和20px做對(duì)比，相當(dāng)于讓兩個(gè)帶單位的長(zhǎng)度做除法運(yùn)算。

/*等同于*/
transform: rotate(atan(.8)); /* 16px / 20px */

也就是說，y/x的值可以得到兩個(gè)CSS長(zhǎng)度之間的真實(shí)比值，而無需額外轉(zhuǎn)換。

然后，通過正切函數(shù)tan將括號(hào)里面的值解析出來。

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

這一點(diǎn)其實(shí)在 JS 中也可以驗(yàn)證一下，只是 CSS 可以帶單位的值。

如果將后面的值設(shè)置為1px，就相當(dāng)于把任意長(zhǎng)度按照1px進(jìn)行切分，也就得到了任意長(zhǎng)度的px數(shù)值，如下：

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

有了這個(gè)不帶單位的絕對(duì)值，我們就可以做很多事情了，下面舉幾個(gè)例子。

二、CSS 獲取當(dāng)前字號(hào)

回到文章開頭的問題，如何通過 CSS 獲取當(dāng)前字號(hào)呢？

根據(jù)上一節(jié)的原理，只要通過tan（） 和 atan2（）就可以將任意長(zhǎng)度轉(zhuǎn)換為數(shù)值了。

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

這樣--px-font就得到了真實(shí)的px數(shù)值。

然后，我們還可以借助 CSS計(jì)數(shù)器，將這個(gè)數(shù)字渲染到頁面。

body::after{
  counter-reset: font var(--px-font);
  content: "當(dāng)前根字號(hào)：" counter(font);
}

結(jié)果...效果如下：

好像不太對(duì)？貌似是瀏覽器的 bug，這種情況下忽略了tan(atan2(1rem, 1px))中的1rem單位。

要修復(fù)這個(gè)問題其實(shí)很容易，需要通過@property定義一個(gè)CSS變量，類型為長(zhǎng)度，然后將需要計(jì)算的值賦給這個(gè)變量，如下：

@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: "當(dāng)前根字號(hào)：" counter(font);
}

這樣就正常了，在改變屏幕尺寸時(shí)會(huì)自動(dòng)渲染出當(dāng)前字號(hào)。

你也可以訪問在線鏈接

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

三、實(shí)時(shí)顯示容器尺寸

CSS容器查詢中出現(xiàn)了幾個(gè)新的尺寸單位。這里只介紹下面兩種。

關(guān)于容器查詢，可以參考這篇文章：介紹2022最期待且已正式支持的CSS container容器查詢 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com)，本文并不涉及具體容器查詢語句。

• 「cqw」 容器查詢寬度（Container Query Width）占比。「1cqw等于容器寬度的1%」。假設(shè)容器寬度是1000px，則此時(shí)1cqw對(duì)應(yīng)的計(jì)算值就是10px。
• 「cqh」 容器查詢高度（Container Query Height）占比?！?cqh等于容器高度的1%」。

利用前面的技巧，可以將cqw、cqh這些單位轉(zhuǎn)換為具體的px值。

假設(shè)有這樣一個(gè)容器。

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

為了使容器尺寸生效，必須聲明容器類型。

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

然后用同樣的技巧，在偽元素中通過計(jì)數(shù)器將寬高渲染出來。

.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);
}

別忘了修復(fù) 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]

四、自適應(yīng)文本的頭像

下面看一個(gè)自適應(yīng)文本的頭像，當(dāng)文本較多時(shí)，會(huì)自動(dòng)縮放，讓文本可以完整展示，如下

原理其實(shí)是通過容器尺寸的映射關(guān)系來動(dòng)態(tài)設(shè)置文本大小，關(guān)鍵實(shí)現(xiàn)如下：

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

但是，通過文字大小來縮放有一個(gè)限制，在PC上，一般會(huì)有最小字號(hào)限制（通常是12號(hào)），所以更好的方式應(yīng)該是通過scale來實(shí)現(xiàn)。

現(xiàn)在，我們可以通過上面的技巧，將容器尺寸轉(zhuǎn)換成scale能夠識(shí)別的數(shù)值，通過文本寬度和容器尺寸的比值來確實(shí)縮放比例，關(guān)鍵實(shí)現(xiàn)如下：

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

這樣就得到了完全自適應(yīng)尺寸的文本頭像了。

完整代碼可以訪問在線鏈接

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

五、總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，介紹了一個(gè)非常巧妙并且有用的 CSS 小技巧，下面總結(jié)一下

• CSS 有很多類型的尺寸，這些尺寸給與了 CSS 強(qiáng)大的適應(yīng)能力。
• 從理論上講，將一個(gè)長(zhǎng)度除以 1px 就可以得到具體的數(shù)值，但是calc不支持。
• CSS 反正切函數(shù) atan2(y,x) 支持兩個(gè)參數(shù)，并且還支持帶CSS單位。
• 通過 tan(atan2(y,x))可以得到y(tǒng)/x的比值，如果x是1px，可以得到y(tǒng)的實(shí)際px值。
• 利用這個(gè)技巧，可以將任意類型值轉(zhuǎn)換為數(shù)值。
• 純數(shù)值可以在各個(gè)地方都可以使用了，比如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。