設計師第一次遞給我一個規格,上面寫著"正文文字 16px,標題 28px,小字 13px"前端引線說"但我們將所有內容都裝在 rem 中,"我在計算器應用程式中手動進行了劃分。十六分之十六是一,十六分之二十八是一點七五,十六分之十三是零點八一二五。然後基本字體大小更改為十像素" 62.5%"在另一個專案上設置,我又做了一切。第三次之後,我在 toolz。dev 工作流程中建立了一個小型轉換器,它悄悄地使我免於此後幾乎所有組件上的算術錯誤。
TL;DR: CSS 單元轉換器根據您控制的根字體大小(預設為 16px)將一個單元中的值(px、rem、em、pt 或 %)轉換為所有其他單元中的等效值。若要將 px 轉換為 rem,請將像素除以根字體大小:
24px ÷ 16 = 1.5rem. 若要反其道而行,請相乘:1.5rem × 16 = 24px. 的 CSS單元轉換器 立即為每個單元執行此操作,完全在瀏覽器中運行,並包含一個可以從中複製的 px 到 rem 參考表。
本指南涵蓋了單元之間的關係、為什麼基本字體大小如此重要、何時到達每個單元以及轉換器運行的確切數學。我設計了很多跨 WordPress 主題、WP Adminify 管理 UI 和 React 儀表板的接口,所有這些都出現了單元問題。一旦你看到單個數字,規則就很簡單。
為什麼 px 到 rem 的轉換很重要?
像素幾乎是每個設計工具匯出的單位。 Figma、Sketch 和 Photoshop 都以像素為單位,因此切換規格是像素值清單。像素也很容易推理,因為一個 CSS 像素是固定的參考大小,當使用者調整任何內容時不會改變。
這種固定性正是可存取、響應式介面的問題。當有人增加瀏覽器時'預設字體大小(許多低視力人士依賴的設定)固定像素大小的文字完全忽略了這個變化。以 rem 為單位的文字大小與之成比例。瀏覽器放大一些較舊的配置和使用者樣式表也是如此。如果您希望您的排版尊重閱讀器'您的偏好設定會在相對單元中調整大小,而 rem 是在整個頁面上可預測地表現的。
所以常見的工作流程是:像素設計,對物運輸。這讓你整天都在做除法,而除法就是小錯誤蔓延的地方。寫作 0.8125rem 代替 0.875rem 對於 13px 值來說,是一種類型,它運送到生產中,使一個標籤看起來有點錯誤。轉換器消除了這種風險,這就是我保持觸手可及的全部原因。如果您完成許多此類任務,範圍會更廣 web 開發人員工具包 涵蓋單元轉換與其他日常工作相符的位置。
px、rem、em、pt 和 % 有什麼不同?
這些單元中的每一個都在渲染時解析為多個 CSS 像素,這是一種關係 CSS 值和單位等級 4 引腳向下:參考像素是針對 96 dpi 顯示器定義的,而不是針對螢幕定義的。差異在於它們的測量依據。
px 是CSS參考像素。它是一個絕對單位,因為它不依賴任何字體大小。 1px 是 1px. 這使得它是可預測的,但也對用戶偏好沒有反應。
雷姆 手段&引用;root em。&引用;一雷姆等於根元素的字體大小 - html 元素。預設情況下為 16px,所以 1rem 是 16px, 1.5rem 是 24px, 和 0.5rem 是 8px. 因為它總是與根相關,所以 rem 值在文件中的任何地方都意味著相同的東西,無論元素嵌套得多深。
電磁幹擾 是相對於字體大小而言的 當前 元素。如果元素's字體大小為20px,那麼 1em 裡面是20px, 1.5em 是 30px,依此類推。捕獲的是 em 複合:如果父級設定 font-size: 1.2em 還有一個孩子也擺好了 1.2em,孩子'有效大小是祖父母的 1.2 × 1.2。此工具假設元素大小在底部,因此 em 和 rem 讀取相同 - 並且您透過將基本字體大小設為該元素's 大小來對特定的 em 上下文進行建模。
pt 是點,繼承自印刷版式。 CSS 將一吋定義為 96 像素和 72 點,因此 1pt 等於 96/72 ens 1.333px,且 1px 等於 0.75pt。點屬於列印樣式表;在螢幕上,它們只是參考像素的固定倍數。
% 對於字體大小,是父字體(或在根,底字體)的百分比。 100% 等於參考尺寸 和 50% 等於一半。以 16 磅為底, 100% 是 16px 和 150% 是24px。
以下是公共值在預設 16px 根位置排列的方式:
| px | 雷姆 | 電磁幹擾 | pt | % |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
的 CSS單元轉換器 為您設定的任何基礎產生整個表格,以便您可以一次查看整個類型的量表。
基本字體大小如何改變一切?
基本(根)字體大小是每個相關單元的樞軸。更改它,每個 rem、em 和 % 轉換都會隨之更改,而 px 和 pt 則保持不變。
瀏覽器預設為 16px,這就是原因 1rem 是正常的 16px. 但您可以將根設為任何內容。流行的模式集 html { font-size: 62.5%; },這使得根 10px(16 的 62.5%)。現在 1rem 是乾淨的 10px,rem 數學變成 "移動小數點":1.6rem 是 16px,2.4rem 是 24px,0.8rem 是 8px。團隊採用此方法,因此樣式表中的數字幾乎像像素一樣讀取,同時仍根據使用者偏好進行縮放。
若要在轉換器中對其進行建模,請將基本字體大小設為 10 並讀取 rem 列。 24px 值現在顯示為 2.4rem 而不是 1.5rem。這也是您在設定自己的字體大小的元件中推理 em 的方式:如果卡片設定 font-size: 20px20,那麼裡面的 em 值相對於 20,所以將底數設為 20 以查看什麼 1.5em 決心要。
我最常看到的錯誤是忘記計算值的基礎。假設根為 16px,有人將 24px 轉換為 1.5rem,然後將其放入運行 62.5% 技巧的項目中,其中根為 10px - 1.5rem 為 15px,而不是 24px。該單位是相對的,因此該數字僅在您知道基數後才意味著某些內容。每當我在項目之間貼上 rem 值時,我首先檢查根字體大小。
如何將 px 轉換為 rem,然後用手將 rem 轉換為 px?
數學是一除一乘。
px 到 rem: 將像素值除以根字體大小。
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
雷姆到 px: 將 rem 值乘以根字體大小。
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px 到 em 當元素位於基本字體大小時,使用與 rem 相同的公式,因此 24px ÷ 16 = 1.5em. 差異是概念性的,而不是算術性的:em 是根據當前元素測量的,因此如果該元素's 大小與根不同,則使用其大小作為基數。
px 至 pt: 乘以 0.75,因為 1px = 0.75pt. 所以 16px × 0.75 = 12pt. 走另一條路, pt × 1.333 = px.
px 至 %: 除以底數並乘以 100。所以 24px ÷ 16 × 100 = 150%.
這都不難,但在設計組件時執行四十次就會導致疲勞產生拼字錯誤。這正是那種重複性、容易出錯的任務 開發人員生產力工具 哲學說自動化 - 卸載算術,這樣你的注意力就會集中在設計上。
每個單元什麼時候應該使用?
沒有一個正確的單位;每項工作都有一個正確的單位。
使用 rem 來表示字體大小。 這是清單中最強烈的建議。 Rem 與使用者擴展'瀏覽器字體大小偏好,這是真正的輔助使用勝利,並且由於它錨定在根音上,因此不會意外複合。大多數團隊都會對 rem 中的所有類型進行調整。
使用 rem 或 px 進行間距,具體取決於您的系統。 許多設計系統以 rem 表示邊距和填充,以便間距與類型成比例。其他的則保持 px 間距,以實現像素完美的佈局。兩者都是可防禦的;選擇一個並保持一致。
將 em 用於應該使用自己的元素進行縮放的事物。 填充按鈕,該按鈕應隨按鈕一起生長'字體大小是 em 的經典用途 - 在 em 中設定填充並自動追蹤文字。相對於相鄰文字的圖示大小是另一個。
使用 px 取得邊框和精細細節。 一個 1px 邊界通常應該保留 1px;您很少希望髮際線隨字體大小縮放。媒體查詢斷點通常也用 px 編寫,儘管有些人更喜歡 em 以表示縮放行為。
僅在列印樣式表中使用 pt。 如果你正在設計一些東西 @media print,點是列印的本機單位,值得使用。在螢幕上,更喜歡 px 或 rem。
使用 % 表示流體寬度,偶爾使用字體大小。 百分比在佈局中隨處可見 (width: 50%),作為字體大小,有時在根部使用 62.5% 的技巧。
CSS 單元有哪些常見錯誤?
第一個是已經描述的基本不匹配問題:根據錯誤的根字體大小進行轉換。在信任 rem 號碼之前,請務必了解您的 root。
第二個是過度精確的 rem 值。有些轉換不能均勻除法 - 16px 底數為 0.9375rem,13px 為 0.8125rem。這些長小數是精確的,但很醜陋,而且將它們四捨五入得太硬(例如 0.94rem)會將渲染的大小移動一點點。我的規則:保留三到四個小數作為 rem,或選擇乾淨地除法的基礎值和尺寸值。轉換器會明智地旋轉並修剪尾隨零 24px 讀作 1.5rem 而不是 1.5000rem.
第三個是複合em。每個設定 em 字體大小的嵌套元素都會使效果倍增,因此深度嵌套的項目最終可能會比預期大得多或小得多。如果您覺得 em 令人驚訝,那麼複合幾乎總是原因 - 將它們切換到 rem,驚喜就會消失。
第四個假設 pt 和 px 可以互換。他們不是; 12pt 是 16px,不 12px. 將它們混合在跨越螢幕和列印的樣式表中是一個微妙的錯誤。
toolz。dev 轉換器如何處理數學?
在引擎蓋下,轉換器使用一個想法:將每個單位表示為多個像素,然後透過像素進行轉換。每個單元都有一個固定的"每單位像素"給定基本字體大小 - px 為 1,rem 和 em 為基數,pt 為 96/72,% 為基數/100。要轉換,它將輸入乘以單位'每單位像素數得到一個像素值,然後除以目標單位'每單位像素數。單次傳遞一次給出每個單位,這就是為什麼您在鍵入時看到 px、rem、em、pt 和 % 一起更新。
它還解析附加單元的值,因此貼上 24px 為您填寫數字和單位。結果四捨五入到小數點後幾位,並刪除尾隨零以提高可讀性,每個結果都有一個一鍵複製按鈕,可以複製該值及其單位後綴,準備粘貼到 CSS 中。一切都運行客戶端 - 您輸入的任何內容都不會上傳 - 這與 隱私優先的方法 網站上的每個工具後面。
如果您也為同一組件選擇顏色或建立陰影,則 CSS漸層產生器 和 盒子影子產生器 只需點擊一下即可直播,範圍更廣 單位轉換器 當您的作品偏離 CSS 時,可以處理長度和重量等實體單位。
常見問題
如何將 px 轉換為 rem？
將像素值除以根字體大小。 在瀏覽器預設值為 16px 時，REM = PX ÷ 16，因此 16px 是 1REM，24px 是 1.5REM，8PX 是 0.5REM。 在轉換器中輸入像素值，REM 等價物會立即出現在您設定的任何基本字體大小。
如何將 REM 轉換為 PX？
將 REM 值乘以根字體大小。 在 16 像素的基礎上，Px = REM × 16，因此 1REM 為 16px，1.5REM 為 24px，0.75REM 為 12px。 如果您的 HTML 元素使用不同的值，請變更工具中的基本字體大小。
預設的根字體大小是多少？
瀏覽器預設將 html 元素設為 16px,這就是為什麼此轉換器從 16 開始。因為 1rem 總是等於根字體大小,因此預設值使 16px 正好等於 1rem。使用者可以變更瀏覽器'預設文字大小,這是 rem 對於可存取、可擴展的排版首選的原因之一。
REM 和 EM 有什麼區別？
rem 始終與根 html 字體大小相關,因此它在整個頁面上保持一致。 em 與目前元素的字體大小相關,因此當嵌套元素各自設定自己的大小時,它可能會複合。設定工具中的基本字體大小以對特定 em 上下文進行建模。
PX 和 PT 在 CSS 中如何關聯？
CSS 將 1 英吋定義為 96 像素和 72 點,因此 1pt 等於 96/72 & 1.333px,1px 等於 0.75pt。點來自列印排版;在螢幕上,它們是 CSS 參考像素的固定倍數。使用 px 或 rem 進行螢幕工作,並為列印樣式表保留 pt。
62.5% 字體大小的技巧有什麼作用?
將 html 字體大小設為 62.5% 會使根字體大小為 10px,因此 1rem 變成方便的 10px,rem 數學會變成移動小數 - 1.6rem 為 16px,2.4rem 為 24px。若要在轉換器中對此進行建模,請將基本字體大小設為 10 並讀取 rem 列。
我應該對字體大小使用 PX 還是 REM？
Rem 通常更適合字體大小,因為它會隨著使用者 #39 的縮放而縮放;瀏覽器字體大小偏好,這提高了可訪問性,而固定 px 則沒有。許多團隊使用 px 進行設計,然後轉換為 rem 以進行最終的 CSS。邊框等佈局細節通常保留在 px 中。
為什麼轉換值有時會長小數？
有些轉換並不精確 - 16px 底數為 15px 為 0.9375rem,pt 值通常會產生重複的小數。為了提高可讀性,該工具會四捨五入到小數點後幾位並修剪零後的值。對於像素完美的佈局,將 rem 值四捨五入到小數點後兩位或三位,或選擇一個可以乾淨地劃分大小的基數。
