6月安卓手機性價比榜：Note 12 Turbo斷層式碾壓
6月份有一個618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產品也出現了歷史低價，那么各個價位段的產品性價比
在 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也能做到，一起了解一下吧！
從理論上來講，將一個長度除以1px就應該得到具體的數值，相當于將這個長度以1px被分成了多少份。
2rem / 1px但是，大家可能都知道，calc在進行除法運算時，除數是不能帶單位的。
calc(2rem / 1px) /*不合法*/不排除瀏覽器以后會支持。
不過現在終于迎來了轉機，在 Chrome 111中，CSS 新增了一系列三角函數。
這里我們不聊三角函數的作用，只是作為一個橋梁中轉一下。
關于「正切函數」，這里簡單回顧一下高中數學
在「直角三角形」中，其中一個銳角的「對邊」和「臨邊」的比值就是這個角的「正切值」，「反正切」就是通過兩條直角邊反向去求出該角的「弧度值」，示意如下：
這些函數本身沒什么特別的，業界通用，但有一個非常例外，那就是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 獲取當前字號呢？
根據上一節的原理，只要通過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容器查詢中出現了幾個新的尺寸單位。這里只介紹下面兩種。
關于容器查詢，可以參考這篇文章：介紹2022最期待且已正式支持的CSS container容器查詢 ? 張鑫旭-鑫空間-鑫生活 (zhangxinxu.com)，本文并不涉及具體容器查詢語句。
利用前面的技巧，可以將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。
你也可以訪問在線鏈接
下面看一個自適應文本的頭像，當文本較多時，會自動縮放，讓文本可以完整展示，如下
原理其實是通過容器尺寸的映射關系來動態設置文本大小，關鍵實現如下：
.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 小技巧，下面總結一下
參考資料：
[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-13373-0.htmlCSS魔法！如何將任意CSS類型轉換為數值？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Java設計原則與代碼重構：提高可維護性
下一篇： 為什么 HTTP/3 正在吞噬世界
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號