PX 轉 EM 換算器

像素與 em 都是常見的 CSS 長度單位，但採用不同的尺寸定義方式。CSS 像素是瀏覽器用來在不同裝置上建立一致視覺度量的參考單位。em 則相對於元素所在情境的字級。對 font-size 等屬性而言，一個 em 通常對應父元素的計算字級；對許多其他屬性，一個 em 則對應元素自身的計算字級。 確認正確基準後，計算很簡單。將像素值除以基準字級即可得到 em。在 16 像素的基準下，24 像素等於 1.5 em，8 像素等於 0.5 em。反向換算時，將 em 乘以基準即可。在 20 像素的基準下，1.25 em 等於 25 像素。本計算器支援雙向換算，不會假設所有設計都採用瀏覽器常見的 16 像素預設字級。 當使用者、佈景主題或元件改變字級時，相對單位有助於讓文字與間距協調縮放。例如，以 em 設定的內距可隨按鈕文字一起增大，在較大字級下維持比例。對不應以相同方式縮放的細節，例如細邊框或需精確控制的圖形，像素仍然實用。沒有哪種單位永遠較好；應依設計目的與繼承情境選擇。 請勿混淆 em 與 rem。rem 相對於根元素字級，而 em 依循局部字級情境，可能在巢狀元素間累乘。若父元素為 1.25 em，子元素也是 1.25 em，子元素的計算字級可能是原始基準的 1.5625 倍。這種行為對獨立元件很有用，但可能讓預期使用根字級基準的開發者感到意外。 要精確換算，請使用實際計算出的基準字級。瀏覽器預設值、使用者無障礙偏好、媒體查詢、繼承樣式及元件規則都可能改變它。開發者工具可顯示特定元素的計算值。換算結果只是所選基準下的數學等值，並不保證兩個宣告在所有響應式或巢狀情境中都有相同行為。請在不同視窗大小、縮放比例與使用者字體設定下測試換算後的樣式，確認可讀性及版面行為均獲保留。