如果這個工具幫到了你,可以請作者喝杯咖啡 ☕
為前端開發者與設計師設計的畫素與REM單位雙向換算工具,支援自定義根字型大小。
還在為響應式佈局中繁瑣的畫素單位換算而煩惱嗎?PX轉REM換算工具能即時完成畫素(PX)與相對單位(REM)之間的雙向轉換。該工具處理的核心物件是CSS中的長度單位,其原理基於一個簡單公式:1 REM等於根字型大小(通常為16px)的倍數。您只需輸入畫素值或REM值,並設定專案對應的根字型大小(Base Font Size),工具即可輸出精確的換算結果,幫助您快速生成適配不同螢幕的CSS程式碼。
問:px轉rem公式是什麼?
答:REM值 = 畫素值 / 根字型大小。例如,根字型為16px時,32px等於2rem。
問:如果我的專案根字型不是16px,換算結果還準確嗎?
答:準確。本工具的核心優勢在於允許您自定義根字型大小。無論您的專案基準是10px、14px還是其他任何值,只要在此輸入對應數值,工具就會基於您設定的新基準進行精確換算。
請確保輸入的畫素值、REM值和根字型大小均為有效的正數(支援小數)。根字型大小是換算的絕對基準,必須與您專案中html元素的font-size屬性值保持一致,否則換算出的CSS程式碼將無法正確渲染。本工具為純前端計算,不涉及資料上傳,可放心使用。暫不支援批次檔案處理。
在移動端優先的響應式設計中,使用REM單位結合媒體查詢調整根字型大小,是實現整體佈局彈性縮放的高效策略。一個典型應用是:設計稿中某元素寬度為750px,基於750px視口寬度的設計稿,若設定根字型為75px(即 1rem = 75px),則該元素的CSS寬度可寫為 10rem。當視口變化時,只需透過媒體查詢調整根字型大小,所有使用REM單位的元素都會按比例縮放,極大簡化適配工作。常見輸入輸出示例:輸入PX=48,根字型=16,輸出REM=3;輸入REM=1.5,根字型=10,輸出PX=15。