px2vwAndvh是一款非常好用的PX單位轉(zhuǎn)換軟件，px2vwAndvh主要就是幫助用戶們將px單位轉(zhuǎn)成vw單位，以此來幫助用戶們更好的去計(jì)算對應(yīng)的數(shù)值，因此這款軟件也是十分適合前端使用，所以有需求的用戶，快來下載軟件進(jìn)行體驗(yàn)吧！

軟件初衷

CSS3中有兩個新尺寸單位vw和vh， 這兩個單位非常適合于開發(fā)移動端自適應(yīng)頁面。

假如說有一個設(shè)計(jì)師做了一張1136x750px的頁面，這長頁面是針對iPhone6的屏幕設(shè)計(jì)的。 前端開發(fā)工程師將這張?jiān)O(shè)計(jì)稿轉(zhuǎn)換成網(wǎng)頁， 網(wǎng)頁中所有的元素尺寸都用px硬編碼， 那么這張網(wǎng)頁在iPhone6中能跑的好好的，但是到了其他手機(jī)中會容易出問題， 畢竟很多手機(jī)的屏幕尺寸和iPhone6是不一樣的。

vw和vh就是用來解決這個問題的。它們是一組相對尺寸單位，和百分比相似， 1vw和1vh其實(shí)和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則是相對與根元素的，更確切一點(diǎn)是

window.innerWidth和window.innerHeight

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

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

我們可以使用以下公式

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

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

但是每次都機(jī)械樣式手動算，太浪費(fèi)時(shí)間了， 于是我制作了一個簡單的換算工具。

更新內(nèi)容

1.修復(fù)已知bug

2.優(yōu)化操作體驗(yàn)