CSS 單位轉換
免費線上 CSS 單位轉換工具,px/rem/em/vw 互轉
CSS 單位類型
px(像素)— 絕對單位,1px = 1/96 英吋。rem — 相對於根字體大小(預設 16px)。em — 相對於父元素字體大小。vw — 視窗寬度的 1%。vh — 視窗高度的 1%。pt — 點(1pt = 1.333px)。cm、mm、in — 實體單位。
如何轉換 CSS 單位
輸入帶有單位的值,設定根字體大小(用於 rem 計算)和視窗尺寸(用於 vw/vh)。工具顯示到所有其他單位的轉換。幫助確保回應式設計在不同螢幕尺寸上正常運作。
▶應該使用 px 還是 rem?
字體大小和間距使用 rem 以支援使用者輔助功能設定(瀏覽器縮放)。邊框、陰影和需要精確控制的細節使用 px。許多團隊採用 rem 優先的方法以獲得更好的可存取性。
▶預設根字體大小是多少?
大多數瀏覽器的預設根字體大小是 16px。所以 1rem = 16px,1.5rem = 24px。可以透過 CSS 的 html { font-size: ... } 更改。
▶何時應該使用 vw 和 vh?
vw/vh 用於隨視窗縮放的回應式版面配置。填滿整個螢幕的主區域(100vh)、隨視窗寬度縮放的字體大小和全寬元素是常見的使用場景。