rwd版型排版觀念:

  1. 用width會出現x軸bar,這個狀況是響應式設計不允許出現的
  2. 用max-width可以自適應內容
  3. 用%會依照父元素(瀏覽器)寬度來算比例(父元素為100%,子元素相加為100%)
  4. 不管設計幾欄版面,總和的%數要加起來為100%
  5. 左側float固定,右側流體設計,右側用margin-left往左推
  6. 在斷點時可以清除浮動float:none,加上自適應螢幕解析度width:100%。斷點時再把margin-left歸零
  7. rwd時的css reset可以加入兩行
*,*:after,*:before {
    box-sizing:border-box;
}
img {
    max-width:100%;
    height: auto;
}

 

創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()