Web、UI與CSS

16px 是多少 rem？基準字級如何影響結果？

使用工具

設計寫 24px，程式寫 1.5rem，根字型 16px 時兩者相同，根字型 20px 時後者卻是 30px。轉換不是換後綴，而是明確長度參照。逐項改變參照，才能理解數值。

輸入 24，px 轉 rem，根字級 16px，得到 1.5rem；只改根字級為 20px，得到 1.2rem。這是在保留 24px 時改變 rem 值。若保留 1.5rem，則長度變為 30px，先明確固定哪一項。

換算取決於參照

24px / 16px = 1.5rem
24px / 20px = 1.2rem
1.5rem × 20px = 30px

16px 是範例而非普遍保證。應檢查根元素計算後的 font-size，以及瀏覽器和 CSS 設定。先確認實際基準，再決定是否都除以十六，可能就能找到整頁尺寸偏大或偏小的原因。

em 與 rem 不同，依賴元素字型上下文；用於 font-size 本身時參照父層，巢狀倍率會累積：16×1.2=19.2，再乘 1.2=23.04px。不是 rem 總更好，而是決定元件按局部縮放還是統一跟隨根元素。

目前一般介面以根字級設定作為 em 參照，不會自動讀取頁面不同父層或元素字級。診斷巢狀 em 時應在開發者工具查看計算值，再單獨整理倍率，不能把全頁 em 都按同一個基準理解。

視窗寬 1440px 時 10vw=144px，375px 時為 37.5px，隨寬度比例變化。高度 900px 時 10vh=90px，即使用在橫向屬性也仍參照高度，需分清想跟隨哪一維。

這裡的視窗是輸入尺寸，不是完整裝置模擬。瀏覽器介面、捲軸和縮放需實測，實體解析度不自動等於 CSS 視窗。行動裝置高度配置要測試瀏覽器列顯隱；工具僅支援 px、rem、em、vw、vh，不把 svh/dvh 自動當成相同單位。

把卡片寬度轉 rem 不會消除 gap、padding、邊框和側欄。先把視窗三等分再加間距可能溢出。統一單位後可用 Flexbox/Grid 試排，並檢查實際父容器寬度，不能把它等同於視窗。

流動字級可能讓窄螢幕內文過小。能換算不等於易讀，應在設計中決定合理上下限，並允許換行而非強塞一行。工具只核對指定條件下的長度，不產生完整響應式設計。

應寫根字級 16px 時 24px=1.5rem，而不只寫換算。vw 附視窗寬度，em 附字型參照，便於別人重現條件。分享前查看結果中的假設欄位，把單位背後的基準寫明。

實作後還要測試放大文字，正確算術仍可能讓固定高度按鈕溢出。用長翻譯、兩行標題、放大內文查看留白和操作區域。發現太小時，不只改數字，也檢查參照。

1440px 視口的 10vw 是 144px，但扣側欄留白後卡片空間更小。vw 不是父元素的百分之十。別的版面中過大可能是參照基準選擇，不是換算錯。% 的參照還依屬性而定，不能同數字取代 vw 就稱等價。

rem 要查實際根字級。24px=1.5rem 假定根 16px，根 20px 時是 30px，這是相對尺寸發揮作用。移植設計值應記錄基準，並在實際控制項測文字放大；固定高度可能截斷正確縮放的文字。

行動裝置的瀏覽器列和虛擬鍵盤會改變可見空間。工具只使用輸入尺寸，不是裝置版面模擬器，也不模擬未支援的動態視口單位。先用換算選候選，再在實際窄螢幕和放大狀態測試。