前言
控制文字大小用vw 來做RWD時，
發現按住ctrl+滾輪縮放時，文字大小竟然不會跟著變動
vw、vh、vMin、vMax 的含義
- vw、vh、vMin、vMax 是一種單位，也是相對單位。
它相對的不是父節點或者頁面的根節點。
而是由螢幕（Viewport）大小來決定的，單位 1，代表類似於 1%。
螢幕( Viewport )是你的瀏覽器實際顯示內容的區域—，
換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
- vw：螢幕寬度的百分比（1vw 代表螢幕的寬度為 1%）
- vh：螢幕高度的百分比
- vMin：當前 vw 和 vh 中較小的一個值
- vMax：當前 vw 和 vh 中較大的一個值
vw、vh 與% 百分比的區別
（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
（2）vw、vh 優勢在於能夠直接獲取高度，而用 % 在沒有設置 body 高度的情況下，是無法正確獲得可視區域的高度的，所以這是挺不錯的優勢。
vMin、vMax 用處
做移動頁面開發時，如果使用 vw、wh 設置字體大小（比如 5vw），在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由於 vMin 和 vMax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裡就可以用到 vMin 和 vMax。使得文字大小在橫豎屏下保持一致。
瀏覽器兼容性
（1）桌面 PC
- Chrome：自 26 版起就完美支持（2013年2月）
- Firefox：自 19 版起就完美支持（2013年1月）
- Safari：自 6.1 版起就完美支持（2013年10月）
- Opera：自 15 版起就完美支持（2013年7月）
- IE：自 IE10 起（包括 Edge）到現在還只是部分支持（不支持 vmax，同時 vm 代替 vmin）
（2）移動設備
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）
結論
看了一下網路上的文章
都比較建議用 rem or em
來當文字的縮放尺寸
也有少部分的說明用 %也可以
就是沒有說用vw or vh
主要原因可能就是它有可能會失效!!
如果真的想要使用vw 來配合控制文字大小
可以使用 CSS clamp()
1 | p { |