聯成電腦網頁設計教學：檢視不同裝置畫面的好工具

文、菜鳥編

       RWD網頁已算是目前網頁規劃中的基本需求，隨著裝置解析度愈來越多元下，設計者要考量版面呈現的細節也越來越多。所以當網頁設計完成後，我們都要在不同裝置下測試，查看有否跑位的狀況發生。

      檢視的工具在網路上可以搜尋到相當多，不過其實最簡單又方便的就是使用Chrome的開發者工具，這篇就來說明一下如何使用開發者工具中的「Toggle device toolbar」來檢視不同的裝置尺寸。

開啟方式：

開啟Chrome開發者工具有三種方式：

1. 按下F12，這是小編覺得最快又好記的方式。

2. 按下Ctrl+Shift+i。

3. 使用功能列。

Step1

      開啟開發者工具後，如果你沒有使用過，可能會發現介面方式如下。

      不過，如果你本身螢幕並沒有很大或使用筆電，建議可依照下圖點選，可將開發者工具視窗獨立出來，會比較好檢視。

Step2

      開啟「Toggle device toolbar 」，快速鍵為Ctrl+Shift+M。

Step3

       開啟後，可在原網頁上看到工具列。

     最左方的下拉選單可以選擇預設好的裝置，也可以自訂經常使用的尺寸。

Step4

        也可以拖曳畫面的兩側，查看RWD變換的效果。

Step5

        檢視的過程中，如果發現有跑位狀況，也可以在開發者工具中調整，先點選「元件選取工具」，點擊跑位得元件。

Step6

        馬上就看到CSS樣式表，可直接調整。

       Chrome開發者工具相當強大，我們這邊也只使用到冰山一角，對網頁設計有興趣的，建議可以深入瞭解一下這開發工具。

痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w