調校網頁版面-善用Chrome和FireFox元素檢測功能

用html和css在網頁組版有時會遇到組出來的版面某一區塊定位和自己預定的位置不太符合,尤其是在RWD自適應網頁設計時,會造成版面錯亂或內容超出畫面需左右移動。

chrome及firefox都有提供元素檢測功能,可快速了解區塊的寬度設定,進而調整適當的寬度(width),相當方便和好用。

操作方式

  • 在目標區塊上按右鍵,選擇「檢查元素」(FireFox為檢測元素),下方會展開html code和該元素對照的css定義。
  • 若沒有一次選中主要目標時,下方點目標的元素,上方網頁即會標出該元素對照區域及尺寸標示。

範例說明

透過元素檢查,發現原版型設計在#copyright此區塊寬度設定為100%加上padding寬度,實際寬度會超出白色區塊寬度,因此右邊內容也會超出,造成在移動設備上看時此區塊右邊內容會超出畫面,因寬度超出畫面寬度造成畫面可以左右邊橫移,感覺並不是很好。
此圖為Chrome上檢視。

改善方式

將#copyright的padding設定取消只保留width 100%做為copyr和copyl跟隨寬度及左右各自靠邊效果,再於#copyr p和#copy l設定margin即可達成效果,又不會有縮放時寬度超出問題,解決畫面會左右移動問題。
此圖為FireFox上檢視。

這個網誌中的熱門文章

沒印表機沒關係 便利商店找印去

被時代淘汱的英文怎麼說

探訪神秘的烏法魯神殿

色情廣告視窗關不掉? 動手解解看吧~

玩轉水晶石工作室 妝點個人部落