Viewport Unit Converter (vw/vh)是做什麼的？

vw = 視口寬度的 1%，vh = 視口高度的 1%。做全屏首屏、自適應間距時常用來替代寫死的 px。選擇模式並填入基準視口尺寸即可換算。

計算結果準確嗎？

本工具在你的本地瀏覽器中即時計算，不依賴伺服器；只要輸入的引數正確，結果即按對應的規則得出。涉及經驗估算的部分僅供參考，不作為正式依據。

使用本工具需要聯網或上傳資料嗎？

不需要。所有計算均在你的裝置本地完成，資料不會上傳到任何伺服器，可放心使用。

視口單位轉換（vh / vw ↔ px） - vw 為視口寬度的 1%

🔄 Viewport Unit (vw/vh) Converter

Convert between viewport units and pixels: vw and vh are 1% of the viewport width and height, handy for full-screen layouts.

📐 工作原理與說明

px → vw：vw = px ÷ 視口寬度 × 100；vw → px：px = vw × 視口寬度 ÷ 100（vh 同理按高度計算）

vw 與 vh 分別是視口寬、高的 1%，因此換算需給定基準視口尺寸。按寬度換算時以視口寬為基準、按高度換算時以視口高為基準，反向（vw/vh → px）則為乘算，用於替代寫死的 px 實現自適應間距與全屏佈局。

轉換模式

數值

基準視口尺寸（px，寬或高視模式而定）

裝置	寬度（px）	典型 vw 示例
手機	360–414	100vw ≈ 360–414px
平板	768–1024	50vw ≈ 384–512px
筆記本	1280–1440	50vw ≈ 640–720px
桌面	1920	50vw = 960px

裝置

寬度（px）

典型 vw 示例

手機

360–414

100vw ≈ 360–414px

平板

768–1024

50vw ≈ 384–512px

筆記本

1280–1440

50vw ≈ 640–720px

桌面

1920

50vw = 960px

📚 深度解析：Viewport Unit Converter (vw/vh)

💡 常見使用場景

全屏區塊。
視口單位換算。
響應式高度。

50vw @寬1280

輸入：50vw、視口寬 1280。處理：相乘。輸出：640px；隨視口變。

❓ 常見問題（FAQ）

移動端位址列？: vh 受位址列影響有波動，關鍵佈局可用 dvh 等新版單位。
和 % 有什麼區別？: % 相對父元素，vh/vw 相對視口；全屏佈局用視口單位更直接。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

如何使用Viewport Unit Converter (vw/vh)

在對應的輸入框或選項中填寫、選擇所需引數。
點選「計算」或「生成」按鈕執行。
在結果區檢視輸出，可複製結果或匯出使用。

引數說明

轉換模式
數值
基準視口尺寸（px，寬或高視模式而定）

適用場景

設計稿標註、配色與排版相關的快速參考。

常見問題

Viewport Unit Converter (vw/vh)是做什麼的？: vw = 視口寬度的 1%，vh = 視口高度的 1%。做全屏首屏、自適應間距時常用來替代寫死的 px。選擇模式並填入基準視口尺寸即可換算。
如何使用Viewport Unit Converter (vw/vh)？: 在對應的輸入框或選項中填寫、選擇所需引數，點選「計算」或「生成」按鈕即可執行，結果會在結果區即時顯示，支援複製與匯出。
計算結果準確嗎？: 本工具在你的本地瀏覽器中即時計算，不依賴伺服器；只要輸入的引數正確，結果即按對應的規則得出。涉及經驗估算的部分僅供參考，不作為正式依據。
Viewport Unit Converter (vw/vh)適合哪些場景？: 設計稿標註、配色與排版相關的快速參考。
使用本工具需要聯網或上傳資料嗎？: 不需要。所有計算均在你的裝置本地完成，資料不會上傳到任何伺服器，可放心使用。

視口單位轉換（vh / vw ↔ px）