假如說有一個設計師做了一張1136x750px的頁面，這長頁面是針對iPhone6的屏幕設計的。 前端開發工程師將這張設計稿轉換成網頁， 網頁中所有的元素尺寸都用px硬編碼， 那麽這張網頁在iPhone6中能跑的好好的，但是到了其他手機中會容易出問題， 畢竟很多手機的屏幕尺寸和iPhone6是不一樣的。

vw和vh就是用來解決這個問題的。它們是一組相對尺寸單位，和百分比相似， 1vw和1vh其實和1%是一樣的。換句話說， 不管是1136x750px的屏幕還是960*640px或著其他的尺寸的屏幕，它們的寬度都是100vw，高度都是100vh。1136x750的屏幕裏， 1vw = 11.36px，1vh =7.5px；960*640px的屏幕裏， 1vw = 9.6px，1vh = 6.4px。 這跟百分比是一樣的。

但是， vw和vh和百分比最大的差別在於，百分百是相對於父元素的， vw和vh則是相對與根元素的，更確切一點是

window.innerWidth

和

window.innerHeight

這給html設置自適應尺寸提供了很大的便利，要為html文檔樹某處枝葉的一個元素設置相對於屏幕的百分比，在以前， 只能用JavaScript動態計算，現在使用vw和vh兩個單位就可以解決問題。

但是這個重px到vw和vh的換算過程挺麻煩的。假定有一張psd設計稿， 寬度為1920px， 高度為1080px， 設計稿中有一個按鈕， 寬為100px， 高位40px， 如何把這個按鈕的寬高從px轉換為vw和vh。

我們可以使用以下公式

寬度(vw) = 100 / 1920 * 100;

高度(vh) = 100 / 1080 * 40;

但是每次都機械樣式手動算，太浪費事件了， 於是我制作了一個簡單的換算工具。

這是工具的界面

首選項裏面填好psd設計搞的尺寸， 然後要計算psd中的頁面元素的vw和vh的值， 只需要在工具寬高輸入框中填入相應的px值， vw和vh值就自動能計算出來了， 減少了無謂手動計算的工作量。

工具下載地址： https://pan.baidu.com/s/1dF1ZPCH

源碼github地址： https://github.com/aspwebchh/px2vwAndvh

註意：此工具必須在windows7版本以上系統使用。

px轉vw和vh的工具（對前端同學有用）