工具用的順手嗎？
你的回饋能幫助我們做得更好
基於根字號將畫素值換算為百分比，適用於CSS響應式設計與彈性佈局。
概覽
了解工具能解決的問題、計算或處理邏輯，以及資料邊界。
這個換算器讓你輸入像素（px）與一個基準像素值，計算兩者的比例百分比，也可以從百分比反算 px。預設基準是 16 px；它只是計算起點，不代表每個 CSS 屬性的百分比都以 16 px 為基準。換算器不會讀取你的網頁樣式、根元素字級或父層尺寸，因此請依實際用途自行設定參照值。
百分比 = px ÷ 基準 px × 100
反算 px = 百分比 ÷ 100 × 基準 px
例如，以 16 px 為基準時，8 px ÷ 16 px × 100 = 50%；反過來，50% × 16 px = 8 px。這是單純的比例運算，結果會顯示最多四位小數，末尾多餘的零會省略。
CSS 的百分比不是一種固定等於「根字級比例」的長度。它相對於什麼數值，取決於所用屬性的定義與排版情境。例如 font-size 的百分比相對於父元素字體大小；某些尺寸百分比則會參照包含塊的尺寸。MDN 對百分比型別與包含塊的說明可協助核對這些差異。百分比值說明、font-size 說明、包含塊說明。
因此，若目標是把字級 8 px 換成相對於父層 16 px 字級的比例，50% 可作為該參照條件下的結果；若要把寬度 240 px 換成父層寬度百分比，基準應填父層可用寬度（例如 320 px），結果為 75%。兩種情境都使用同一公式，但基準不同。
頁面提供基準 px、待換算 px 與百分比兩個數值欄位。修改其中一側時，另一側會同步換算；數字欄位也支援小數。結果欄旁可複製數值，重置會回到 16 px 基準與 16 px 輸入。下方常用數值表會依目前基準列出對照，點選數值即可帶入換算。
指南
依步驟完成操作，並透過範例核對輸入與結果。
要換算字級時，確認相關父元素的字體大小；換算版面尺寸時，確認該 CSS 屬性所參照的包含塊或其他基準。不要直接假設 16 px 永遠適用。
在「基準畫素」輸入你確認的參照 px，再在 px 欄輸入原始尺寸。初始基準為 16 px；若要換算父層寬度比例，請以父層寬度取代預設值。
讀取百分比欄位，或直接輸入百分比取得反算 px。使用複製按鈕複製需要的數值；套用前請確認 CSS 屬性的百分比規則與基準一致。
例：240 px 元素置於可用寬度 320 px 的參照區域，設定基準為 320，輸入 240，換算結果為 75%。
情境
查看這項工具在不同工作與生活流程中的用法。
整理設計稿的 px 字級時，先確認父層的字體大小，再用它作基準換算。例如父層 16 px、目標 12 px，結果為 75%；實際 CSS 字級仍須按元素繼承關係確認。
將區塊寬度換成父層寬度百分比時，以對應的父層尺寸為基準。320 px 寬的父層中，240 px 約為 75%，可用來快速核算設計標註。
在檢視稿面或整理 CSS 數值時，輸入同一組 px 與參照尺寸即可比對比例；若版面有內距、邊框或不同包含塊，應先確認實際參照尺寸。
問答
集中解答常見疑問與容易混淆的問題。
16 px 是此工具的初始參照值，方便開始計算；它不會自動讀取瀏覽器預設字級或你的專案設定。若實際參照值不同，請先改成正確基準。
只有當你要比較的基準是 320 px，比例才是 75%。CSS 會依屬性決定百分比所參照的量；若屬性以其他尺寸為基準，或版面中的包含塊不同，數值就不代表相同結果。
可以。在百分比欄輸入數值，工具會依目前基準計算 px。例如基準 320 px、輸入 75，反算為 240 px。
計算輸出最多顯示四位小數，並去除末尾多餘的零。若你的工作流程需要特定精度或格式，請依專案規範自行檢查。
須知
使用前了解適用範圍、結果限制與必要提醒。
此頁依你輸入的基準做比例換算，不會檢查 CSS 屬性、元素階層、包含塊、盒模型或專案樣式。百分比是相對值，不能只根據 px 數字推定唯一答案。請以該屬性的規範和實際版面參照量確認基準；尤其寬度、內距、字級等用途可能有不同參照規則。換算數值僅提供數學比例，不保證貼入 CSS 後產生預期版面。
推薦
查找相關工具、專題與可用的 API 能力。
