CSS單元轉換器

CSS 單元轉換器可轉換 CSS 用於調整大小類型和佈局的單元之間的長度:px、rem、em、pt 和 %。它的存在是因為現代響應式設計依賴相對單元 - rem 和 em 透過使用者的字體大小設定和縮放進行縮放 - 而設計模型和舊樣式表通常以固定像素表示。此工具採用 24px 等值,並同時顯示為 1.5rem、1.5em、18pt 和 150%,並且從單一欄位向各個方向工作。

轉換全部取決於一個數字:根(基本)字體大小,預設為 16px,因為這是 html 元素的瀏覽器預設值。 1 rem 總是等於基本字體大小,因此在 16px 時,值 16px 為 1rem,24px 為 1.5rem,8px 為 0.5rem。點與 CSS 參考像素相關 - 1 英吋為 96px,72pt - 因此 1pt 等於 96/72,約 1.333px。百分比被視為基本字體大小的份額,因此 100% 等於基本字體大小,50% 等於一半。

每次轉換需要兩個步驟。該工具首先將輸入乘以一個輸入單元中的像素數,然後將像素值除以一個目標單元中的像素數,將輸入轉換為像素。在 18px 基數下,27px 變成 27 RIST 18 = 1.5rem,在任何基數 12pt 變成 12 × 96 RIST 72 = 16px。結果四捨五入到最多小數點後四位,因此 16px 基數下的 15px 讀數為 0.9375rem。 vw 和 vh 等視口單元不是轉換器的一部分,因為它們取決於視窗大小而不是字體大小。基本字體大小為零或更小會回落到 16px。

當您鍵入時,所有內容都會在瀏覽器中運行,因此伺服器上無需上傳和等待。更改基本字體大小以對設定自己的字體大小的元件進行建模,讀取每個單元中的結果,然後複製您需要的結果。內建的 px-to-rem 表可為您提供類型比例中最大大小的現成參考。