靈活的 CM 到 VH 轉換，用於建立完全響應式網站。.

現代網頁設計講究彈性。您的網頁佈局應該在各種尺寸的螢幕上都美觀大方，無論是大型顯示器還是小型智慧型手機。 ToolsMate 出品的 CM 轉 VH 轉換器就能幫您輕鬆實現這一點。.

在這個計算器中，公分 (cm) 是一個絕對的實際測量單位，它會被轉換成視口高度 (vh) 並顯示出來。視口高度是一個相對測量單位，可以自動根據使用者的螢幕進行縮放。無論您是網頁設計師、網頁開發人員還是前端愛好者，都可以將厘米轉換為視口高度，從而確保您創建的所有內容在任何裝置上都能完美呈現。.

CM 和 VH 單元洞察。.

網頁設計中的 CM 是什麼？

公分 (cm) 是一種長度單位，通常用於印刷設計或進行精確測量。 CSS 可以使用公分來指定某些尺寸，但它有一個缺點：公分值是固定的，也就是說，它不依賴螢幕的尺寸或解析度。因此，在某個裝置上顯示完美的影像在另一個裝置上可能會失真。.

什麼是視口高度（VH）？

另一方面，視口高度 (VH) 是一個響應式 CSS 單位。.

1 VH = 總視口高度的 1/100。.

那麼，當裝置的螢幕高度為 900 像素時，1 VH = 9 像素。.

VH 值會根據螢幕高度自動調整，從而實現響應式佈局。這樣，無論使用何種設備，您都可以建立出 VH 值一致、平衡且使用者友好的頁面。.

厘米到維赫數的轉換公式

下面所示的基本公式可用於將厘米轉換為視口高度：

VH = (公分 × 37.7952755906) / 螢幕高度（像素）

此等式的原理是將公分轉換為像素（公分乘以 96 DPI 為預設像素數，1 英吋為 2.54 公分），然後將像素數除以視口的高度。.

範例：CM 到 VH 的轉換

我們將採用 20 公分元素和 1080 像素螢幕尺寸的案例場景。.

VH = (20 × 37.7952755906) / 1080 = 0.7VH

它類似於 20 厘米，或在 1080 像素高的顯示器上約為 0.7 VH。.

這個數值當然取決於不同的螢幕高度，而這正是 VH 在響應式設計方面如此靈活的原因。.

CM 轉 VH 轉換器使用方法。.

轉換過程簡單快捷，只需幾個步驟即可完成：

1. CM 轉 VH 轉換器 ToolsMate.online。.
2. 請輸入所需的公分值。.
3. 將螢幕上的像素數量加上（例如 1080、1440 等）。.
4. 點擊“轉換”按鈕。.
5. 每秒視口高度 (VH) 預覽次數。.

然後，您可以將 VH 的值插入 CSS 中，以建立響應式佈局。.

為什麼要將公分轉換為伏安？

用公分代替視口高度確實有一些設計上的優點：

1. 完全響應式佈局

VH 裝置會自動調整以適應使用者正在使用的螢幕尺寸，其設計與手機、平板電腦和桌上型電腦上的裝置類似。.

2. 提升使用者體驗

與 VH 相似的比例在任何裝置上都更加自然，無需滾動或調整大小。.

3. 簡化程式碼管理

相對單位可以最大限度地減少 CSS 媒體查詢的數量，並且您的樣式表更簡潔、更易於維護。.

4. 更好的無障礙性

基於 VH 的設計能夠適應輔助環境（包括縮放）選項，並且所有用戶都可以共享樂趣。.

CM 到 VH 轉換應用。.

CM 到 VH 轉換器可用於絕大多數網頁設計場景，例如：

• 英雄區域或橫幅： 全螢幕影像可以完美適應任何顯示器。.
• 背景圖片： 保持設備比例。.
• 字體排印和間距： 無需複雜的CSS腳本即可實現均勻的佈局。.
• 動畫： 與螢幕尺寸成比例的運動或效果。.

如果您希望元素隨視窗擴展，並且需要在 CM 和 Web 之間切換設計，以便準確地將設計轉換為印刷品或靜態模型到 Web，那麼 VH 是最佳選擇。.

CM 到 VH 轉換表。.

下面提供了一個簡要參考表格，假設螢幕高度為常見的 1080 像素：