Viewport Unit Converter (vw/vh) 使用指南
<p><strong>輸入：</strong>50vw、視口寬 1280。</p><p><strong>處理：</strong>相乘。</p><p><strong>輸出：</strong>640px；隨視口變。</p>
核心功能
- 在視口單位（vw / vh）與 px 之間雙向換算
- 支援按視口寬度或高度為基準，四種模式（px→vw、px→vh、vw→px、vh→px）
- 基準視口尺寸可自定義（預設 1920px），便於對齊設計稿斷點
- 純本地計算，不上傳任何輸入
適用場景
- 全屏區塊。
- 視口單位換算。
- 響應式高度。
使用步驟
- 選擇轉換模式（px → vw / px → vh / vw → px / vh → px）
- 輸入需要換算的數值
- 填入基準視口尺寸（按模式對應寬度或高度）
- 讀取結果區帶單位的值與所用基準提示
- 把結果代入 CSS 並用 DevTools 改變視窗寬度驗證表現
實用技巧
- 移動端瀏覽器位址列收起/展開會讓 vh 變化，關鍵全屏佈局優先用 dvh / svh / lvh
- vw 會包含捲軸寬度，桌面端可能出現橫向溢位，可用 100% 或 calc 規避
- 視口單位適合全屏區塊與流式字號，元件內部間距仍建議 rem 更可控
- 換算只在給定基準下成立，改斷點後需按新基準重算
常見問題
- 移動端位址列？
- vh 受位址列影響有波動，關鍵佈局可用 dvh 等新版單位。
- 和 % 有什麼區別？
- % 相對父元素，vh/vw 相對視口；全屏佈局用視口單位更直接。
- 會儲存或上傳我的內容嗎？
- 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。