當今天在設計網頁時，為了方便測試網頁在行動裝置下，版面是否正常呈現，這時就會直接拖拉視窗，改變視窗尺寸，來模擬一下在行動裝置下的各種解晰，同時還可搭配瀏覽器中的網站管理工具，當有任何問題時，方便進行除錯，但是否有發現到，無論那一家的瀏覽器，都有最小的限制，差不多在400像素左右，就無法再向下縮，這時就得實際手機，進行測試，才可知道是否有跑版。 　　相信這問題，應該是許多從事網頁設計朋友，共同的困擾，但現在只需在Chrome瀏覽器下安裝此外掛後，立即就可解決此問題啦!同時視窗變得超軟Q，想縮多小就縮多小，因此身為網頁設計的朋友，現在也趕快來看看囉!

---

OSX Resizer：

---

Step1
進到外掛網頁後，先點加到CHROME鈕。

---

Step2
接著再點新增擴充功能鈕，就可完成安裝。

---

Step3
當安裝完畢後，在網址列後方，就會出現一個手機的圖示。

---

Step4
當要啟用時，只需對著該圖示點一下。

---

Step5
接著就會將目前所瀏覽的網頁，再另啟一個新視窗，同時無網址與狀態列，畫面更為乾淨，這時還可拖拉視窗，改變視窗大小。

---

Step6
這時視窗變得超軟Q，想多大多小都可以，而原先的最小視窗只能400像素而已，因此身為網設的朋友們，也趕快來安裝一下囉!

　　先前曾透過百分比，來將Bootstrap的廣告輪播系統變成全螢幕，但這時圖片就會依照比例，等比的將圖片放到滿版，這時當螢幕的比例與圖片不符時，就會發現到，廣告輪播的切換鈕跑到下方去，同時還會出現捲軸，因此這時若要解決此問題，就只能透過jQuery來計算當前螢幕的顯示比例，再去縮放圖片，但現在有更簡單的方法啦!透過CSS3的新單位vh與vw，就可完成全螢幕啦!而vh與vw到底是什麼單位呢?現在就一塊來了解吧!

---

CSS3新單位vw：
vw：view width指的是螢幕可視範圍寬度百分比，用法與%相當雷同，當設為10表示為可視範圍10%的意思。

---

CSS3新單位vh：
vh：view height指的是螢幕可視範圍高百分比，有了vh後，終於可實現高度百分百的夢想，就很像早期使用table時，可設定高度100%，高度撐滿整個螢幕。

---

CSS3新單位vmin/vmax：
在了解CSS3新單位的vw與vh後，還有另一單位為vmin和vmax，而vmin指是取得「長、寬較小值百分比」，vmax則是取得「長、寬較大值百分比」，在了解CSS3的新單位，就可將這單位應用到Bootstrap中，將原來的廣告輪播變全版面的廣告。

---

Step1
只需在CSS中加入以下的設定值。

---

Step2
這樣就Bootstrap的廣告輪播，就會以全版顯示，是不是超EZ的呀!!

---

[範例預覽] [範例下載]