如何將 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 與目前元素的字體大小相關,因此當嵌套元素各自設定自己的大小時,它可以複合。此工具假設元素大小在底部,因此 rem 和 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(16px 的62.5%),因此1rem 變成方便的10px,rem 數學會變成「移動十進位」--1.6rem 為16px,2.4rem 為24px。若要在轉換器中對此進行建模,請將基本字體大小設為 10 並讀取 rem 列。

我應該對字體大小使用 PX 還是 REM？

REM 通常在字體大小中首選，因為它可以與使用者的瀏覽器字體大小偏好進行縮放，這可以提高可訪問性，而固定 PX 則不會。許多團隊在 PX 中設計並轉換為最終 CSS 的 REM，這正是該工具的加速。邊框等佈局細節通常保留在 px 中。

這裡如何轉換百分比？

百分比被視為基本字體大小的份額，因此 100% 等於基礎字體大小，50% 等於其一半。在 16 像素的基礎上，100% 是 16 像素，150% 是 24 像素。這與百分比字體大小如何解析其參考大小相符。

為什麼轉換值有時會長小數？

有些轉換並不精確 - 16px 底數為 15px 為 0.9375rem,pt 值通常會產生重複的小數。為了提高可讀性,該工具會四捨五入到小數點後幾位並修剪零後的值。對於像素完美的佈局,將 rem 值四捨五入到小數點後兩位或三位,或選擇一個可以乾淨地劃分大小的基數。

如何將 px 轉換為 em？

將像素值除以其適用的元素的字體大小。在 16px 上下文中,px RIST 16 給出 em,因此 24px 為 1.5em,8px 為 0.5em - 與底部的 rem 數學相同。區別在於 em 是相對於當前元素的,因此當嵌套元素各自設定自己的大小時,它會複合;在此處設定基本字體大小以對特定上下文進行建模。

我的輸入是否傳送到伺服器？

不。每次轉換都會在瀏覽器中以 JavaScript 運行，這就是為什麼每次按鍵都會更新結果而不是在網路請求之後更新。您輸入的任何內容都沒有傳輸、記錄或儲存，一旦頁面載入，轉換器繼續離線工作。

CSS單元轉換器

Q: 如何將 px 轉換為 rem？

將像素值除以根字體大小。 在瀏覽器預設值為 16px 時，REM = PX ÷ 16，因此 16px 是 1REM，24px 是 1.5REM，8PX 是 0.5REM。 在轉換器中輸入像素值，REM 等價物會立即出現在您設定的任何基本字體大小。

Q: 如何將 REM 轉換為 PX？

將 REM 值乘以根字體大小。 在 16 像素的基礎上，Px = REM × 16，因此 1REM 為 16px，1.5REM 為 24px，0.75REM 為 12px。 如果您的 HTML 元素使用不同的值，請變更工具中的基本字體大小。

Q: 預設的根字體大小是多少？

瀏覽器預設將 HTML 元素設為 16px，這就是此轉換器從 16 開始的原因。 因為 1REM 總是等於根字體大小，所以這個預設值使 16px 等於 1rem。 使用者可以更改瀏覽器的預設文字大小，這也是 REM 更適合可存取、可擴展的排版的原因之一。

Q: 這裡如何轉換百分比？

百分比被視為基本字體大小的份額，因此 100% 等於基礎字體大小，50% 等於其一半。 在 16 像素的基礎上，100% 是 16 像素，150% 是 24 像素。 這與百分比字體大小如何解析其參考大小相符。

在 CSS 單元(px、rem、em、pt 和 %)之間進行轉換,具有可設定的根字體大小、即時全單元輸出以及用於響應式排版的 px 到 rem 參考表。

Convert from:

Value (Pixels (px))

Base font size (px)

Converted values

16px

rem

1rem

1em

12pt

100%

px → rem reference (base 16px)

px	rem	em	pt	%
1	0.0625	0.0625	0.75	6.25
2	0.125	0.125	1.5	12.5
4	0.25	0.25	3	25
8	0.5	0.5	6	50
10	0.625	0.625	7.5	62.5
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
20	1.25	1.25	15	125
24	1.5	1.5	18	150
28	1.75	1.75	21	175
32	2	2	24	200
36	2.25	2.25	27	225
40	2.5	2.5	30	250
48	3	3	36	300
56	3.5	3.5	42	350
64	4	4	48	400

Category:css

Mode:Offline

Version:1.0.0

Access:Free

什麼是 CSS 單元轉換器？

CSS Unit Converter interface on Toolz.dev - Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.

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% 等於一半。

輸入時所有內容都在您的瀏覽器中運行，因此沒有上傳，無需等待伺服器，也沒有限制您轉換的值。將基本字體大小變更為設定自己的字體大小的元件，在每個單元中讀取結果，然後複製您需要的組件。內建的 PX-TO-REM 表可為您提供有關類型比例中最常見的尺寸的現成參考。

如何使用 CSS 單元轉換器？

輸入值並選擇其單位

輸入要轉換的數字並選擇目前所在的單位 - px、rem、em、pt 或 %。您也可以將一個值貼到其單位上,例如 24px,工具將為您讀取該單位。

設定基本字體大小

如果您的專案使用 16px 瀏覽器預設以外的其他內容，則調整根字體大小。這控制了 REM、EM 和 % 與像素的關係。

立即閱讀每個單元

轉換器會立即顯示所有支援的單元中的等效值，每個單元都有其單元後綴，因此您可以將其直接放入 CSS 中。

複製或使用參考表

一鍵複製任何結果，或在印刷比例中掃描 PX-TO-REM 參考表以尋找常見的大小。

主要特點

每個單位同時

輸入一個值並立即查看 PX、REM、EM、PT 和 % 並排，每個值都與其單元格式化，以便您可以直接將其貼上到樣式表中。

可配置的基本字體大小

根字體大小是可調節的,因此 rem、em 和 % 轉換與您的項目相符 - 無論您使用 16px 預設、10px"62.5%"技巧還是組件級字體大小。

雙向，任何方向

沒有固定的"從"和"到"。從單一輸入將 px 轉換為 rem、rem 轉換為 px、px 轉換為 em 或 pt 轉換為 px(任何單位到任何單位)。

PX-TO-REM 參考表

內建表列出了在類型標度中出現的最常出現的像素大小的 REM、EM、PT 和 % 等價物，因此您可以在所選的基地上注視整個比例。

Frequently Asked Questions

將像素值除以根字體大小。在瀏覽器預設值為 16px 時，REM = PX ÷ 16，因此 16px 是 1REM，24px 是 1.5REM，8PX 是 0.5REM。在轉換器中輸入像素值，REM 等價物會立即出現在您設定的任何基本字體大小。

Related Tools

CBS

css

CSS Box Shadow Generator

Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.

CCG

css

CSS Clamp Generator

Generate fluid, responsive CSS clamp() values that scale between viewports

CSS

css

CSS Gradient Generator

Create beautiful CSS gradients with live preview

CTS

css

CSS Text Shadow Generator

Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.

Comments

0 comments

No comments yet. Be the first to share your thoughts!

px to rem converterrem to px converterpx to em convertercss unit converterpx to pt converterrem calculatorem to pxcss font size converterpixel to remresponsive font size converter

了解更多

閱讀完整的 CSS單元轉換器指南

Command Palette

CSS單元轉換器

什麼是 CSS 單元轉換器？

如何使用 CSS 單元轉換器？

輸入值並選擇其單位

設定基本字體大小

立即閱讀每個單元

複製或使用參考表

主要特點

每個單位同時

可配置的基本字體大小

雙向，任何方向

PX-TO-REM 參考表

Frequently Asked Questions

Related Tools

CSS Box Shadow Generator

CSS Clamp Generator

CSS Gradient Generator

CSS Text Shadow Generator

Comments

了解更多

CSS單元轉換器

什麼是 CSS 單元轉換器？

如何使用 CSS 單元轉換器？

輸入值並選擇其單位

設定基本字體大小

立即閱讀每個單元

複製或使用參考表

主要特點

每個單位同時

可配置的基本字體大小

雙向，任何方向

PX-TO-REM 參考表

Frequently Asked Questions

Related Tools

CSS Box Shadow Generator

CSS Clamp Generator

CSS Gradient Generator

CSS Text Shadow Generator

Comments

了解更多