¶給平面設計師的: 淺談 RWD 單位 vh, vw

精準的給予畫面定義，收斂前端工程師猜想設計師的設計邏輯，盡可能的讓結果成為一個，而設計師也可以得到自己理想中的成品。

讓我們來看看 vw 和 vh 怎麼使用，又有什麼地方會造成溝通上的問吧！

¶設計師會這麼想

這個區塊「滿版」

1. 捲動時，剛好就是下一個區塊的開頭
2. 無法捲動

設計師沒說的話: 「不管在什麼尺寸下都要滿版，不超過也不會不足」

¶vw, vh 定義

^{「手機的 1vw 」≠「 桌機的 1vw 」≠「 筆電的 1vw 」}

vh: 可視區 (viewport) 的高度 (px) ，除以 100 ，等於 1vh
vw: 可視區 (viewport) 的寬度 (px) ，除以 100 ，等於 1vw

¶實驗

這是個可以抓到目前使用裝置解析度的程式

內容有將 vh 和 vw 視覺化顯示在畫面上。

• 右上角是 1vh 的高度
• 右下角是 1vw 的寬度

可以試著用不同型號的裝置來開這個頁面看看。
就可以發現它是會變動的大小。

¶設計師怎麼用？

預防上面寫得不清楚(或上沒看，直接跳過)。

先知道「上述的運算方式算出來，是一個 px 值」
在出設計尺寸圖時，最後必須量出元素尺寸

才有辦法給工程師這樣的生物理解畫面。

¶第一種情境，設計師使用距離尺寸

假設
環境寬度尺寸: 桌機版 1920px ，手機版 667px 。
元素寬度尺寸: 桌機版 50px ，手機版 18px 。

通常工程師看見這種情況會有兩種做法
^{這正是寫文章的目的，避免一個以上的方法!!!}

距離尺寸: cm, in, px, pt…

¶第一種: 設定斷點

• 解析度 668px 以上使用 50px
• 解析度 667px 以下使用 18px。

¶第二種: 設定比例

試看看「環境尺寸」 ÷ 「目標尺寸」
在「桌機」和「手機」的情境下，算出來的數字是不是很接近!!!

1920÷50 ≒ 667÷18 ??
1920÷50=38.4
 667÷18=37.05555555555556

發現它們的誤差不大，就可以使用 vw 。(運氣好)

岐見之處
使用上述的第二個方法後，可以在尺寸圖上標示 37vw。
就可以在任意解析度維持著「此距離佔整個畫面的這個比例關係」

設計師看見成果，會抱怨的點在於，螢幕寬度解析度: 1920-1 ~ 667+1 之間，比例不太對。
是工程師自己腦補、亂猜的結果

¶第二種情境，設計師使用比例尺寸

假設
有個寬度方向的比例: 桌機版和手機版都佔整版面寬度 20%。

工程師看見這樣的標示，就簡單多了，它就是20vw。

岐見之處
但是!!!設計師若在設計圖稿上使用大量的比例標示，都會與其它的比例混在一起。1:0.2, 1:0.5, 1:5，各個比例的基準大小，也就是那個1，是必須要清楚表示的。

最後工程師就又自己猜想「這個1應該是它吧？但是旁邊這個1又是誰的1呢？」。工程師又自己腦補、亂猜了。

¶設計師反映

「寫得太複雜!!不好懂」