[RWD] 響應式網頁 - 實作常見問題與錯誤

乳蹄，本篇筆記非常簡潔扼要地列出 3 點 RWD 要注意的問題。

確認 media query 斷點

先抓熱門的螢幕解析度，例如平板 (768px) 及 iPhone 5 橫式 (569px)，在這兩個解析度之間會有一個斷層，可能在寬度 6xx px 時版面會變得比較難看，此時就為這一段斷層加條件：

@media(max-width: 767px) and (min-width: 569px){
  ...
}

media query 到底要寫在一起還是分開寫

同一個 <div> 就寫在一起，包含該 <div> 的子元素。

不要習慣性寫死高度

在 PC 版上是可以寫固定高度的，因為版面不會隨螢幕大小而變化。但是要記得在 media query 中多加一行 height: auto，讓內容自適應延伸。