1. ie9以下（不包括ie9）采用ie條件注釋，為ie8以及一下單獨開一個樣式文件   
  2. 一個模塊的mq樣式整體放在這個模塊的樣式的之后，符合層疊邏輯，也同時以免被層疊。
  3. 祈求在一個相應點上同時做變化幾乎是不可能的，因為版式中間的變化，無論是視覺還是具體的編碼人員不可能掌握所有細節(jié)。
  4. 流體布局很關鍵，%視父級為參照物，這一點雖然很多人都知道，但是實際做的時候卻最容易被忽略。
  5. 清除浮動也很重要，切記。
  6. 如果你希望邊框、邊距（內(nèi)、外）也在100%的范圍內(nèi)，直接設置width:auto就好了，不要給予希望在新的css3屬性上，也不要寄希望在-webkit上，-webkit-很容易就會變成下一個ie6了。
  7. 合理的嵌套更加健壯，用一個包裝元素來替代設置當前元素margin或者padding。舉例，假如有A和B兩個元素，width是40%，maring-right是10%，這樣很容易在搜索瀏覽器的時候篡位，所以用一個包裝元素C去分別包裹A和B，然給給C設置50%，A和B分別設置為80%。這樣就是合理且健壯的嵌套了。
  8. 兩行兩列這種設計，由于流體布局和字數(shù)的不同，所以為每一行添加一個包裝元素，更加健壯。也就是說，先做兩行，再在每一行里做兩列。
  9. 不要奢望在在每一個像素的寬度上不會出現(xiàn)超出預期的表現(xiàn)，因為沒有任何人知道頁面在每一個像素寬度時候的表現(xiàn)的樣子，頁面越負責可預期的就越不準確。所以mq可能真的是“非預期數(shù)值”（預期數(shù)值指代在設計和實現(xiàn)之前約定的響應點）
  10. 相同區(qū)間的mq和mq會層疊，全局的樣式也會和mq中的樣式層疊，所以屬性盡量不要寫成縮寫。以減少忘記的風險。
  11. 圖片的自適應處理不容易，特別是有邊框的，如果正常條件（沒有利用mq來約束）下設置了寬和高，在另外一個mq下，僅僅設置一個屬性是不行的，還是那句話，mq不是二選一（除非是兩個不同的mq區(qū)間），而是層疊??！
  12. 如果水平列表的兩端的元素兩端對齊，以四個元素為例，那么除了前三個預留左邊距，最后一個為零；或者第一個右邊據(jù)為0；后三個有右邊距以外。可以采用第一個左側(cè)有，最后一個右側(cè)有，中間兩個左右偏移邊距來做，短的一面為 邊距除以空白數(shù)，比如4個列表項，邊距為40,則40除以3。好處么？就是可以保證每一個外包裝為通欄的25%。
  13. 四個25%，兩個50% 沒關系，但是50% 25% 25%就可能會掉下去最后一個，所以24.99，22.49有時還會相差1~2像素。
  14. 如果版式變化不大，那么從大到小的寫mq，不必寫一個區(qū)間，只寫最大值即可，這樣一層一層的繼承，小尺寸繼承大尺寸，另外，不用過分擔心選擇器本身權重的問題，mq會提高其優(yōu)先級。
  15. 像導航和版權這種在pc、pad、phone截然不同的版式。mq，就寫區(qū)間。這樣在區(qū)間外就等于這些dom毫無樣式，這樣就不比擔心由繼承引發(fā)的覆蓋、優(yōu)先級、重寫以及未知問題。減少了屬性的重寫，提高了效率、降低了修改成本。其實就是等于一個dom，為不同的設備寫不同的樣式，這些樣式之間不繼承。
  16. 如果你希望幾個元素是相對位置不變的話，請將他們包裹，通過這個包裹元素使他們整體與其他元素或元素組做排版，所以一個健壯的響應式離不開這些看似“冗余”的包裹元素。但還是以最少的可實現(xiàn)目標的dom層級為目標。
  17. 關于背景圖，以中心為原點進行“裁剪”是理智的，已某一側(cè)為原點看起來都有點怪。另外可以使用background-size某個值為auto，另外一個使用%
  18. 大圖片請寫在一個mq區(qū)間內(nèi)，不要只寫最大值，這樣會搞定按需加載的問題。