上一篇我們學會了 vw 的運算邏輯，先複習一下：

vw 為視窗寬度的百分比，1vw 為視窗寬度的 1%，在視窗寬度為 100px 時，1vw 的計算結果為 1px，因為 100px * 1% = 1px。

等價交換

延續最前面所述，vw 為視窗寬度的百分比，所以我們將視窗寬度切成一百份後，一百份中的幾份就是多少 vw。

那麼 100vw 應該就是 100 份之中的 100 份，也就是整個視窗寬度的 100%。所以 視窗寬度的 100% == 100vw。

提煉比例

假設我想要知道設計稿上的某一張圖片的寬度佔了設計稿寬度中多少比例，是不是就是圖片寬度 / 設計稿寬度 * 100%。

舉例來說，如果設計稿寬度為 1440px，而圖片寬度為 720px，那麼 720px / 1440px * 100% = 50%，也就是說圖片是設計稿寬度的一半。

這個算式可以幫助我們將設計稿中的像素值轉換為相對於設計稿的比例。

完成咒語

我們的目標是：讓圖片在「視窗」上所佔的比例，等於它在「設計稿」上所佔的比例，所以這張圖片應該佔視窗寬度的 圖片寬度 / 設計稿寬度 * 100%。

結合 視窗寬度的 100% == 100vw 的結論，我們可以將 100% 換成 100vw 而得到一個公式：圖片寬度 / 設計稿寬度 * 100vw

接著，我們不只想將圖片佔比與設計稿相同，而是想將所有內容都等比例的還原到頁面中，圖片寬度是這個公式，那麼其他設計稿上的資訊也應該是這個公式，所以我們可以將公式改成：

設計稿上的值 / 設計稿寬度 * 100vw

這就是我們最終所需要的公式，專門用來計算 vw 的數值應該寫多少。

如果真的還是無法理解，拜託你把公式背起來，我求你了 Q_Q。