響應式設計的基本理解

Question

因爲炒作是響應式網頁設計，我已經知道如何編寫它，我只是在這裏澄清我自己的一些問題，然後才繼續做錯事。

如果我們設置一個div的樣式像這樣：

div { 
    width:200px; 
    height:200px; 
    background: #000; 
    margin: 10px 5px; 
    } 

我們響應我們所希望的方式將我們做 -

div { 
    background:#000 
    } 
@media screen and(max-width:1200px) { 
    div { 
     width:300px; 
     height:300px; 
     margin: 20px 5px;//Question is here 
     } 
    } 
@media screen and(max-width:720px) { 
    div { 
    width:300px; 
    height:300px; 
    margin: 20px 5px;//question is here 
     } 
    } 

@media screen and(max-width:360px) { 
     div { 
    width:200px; 
    height:200px; 
    margin: 10px 5px; 
      } 
    } 

的問題是，在面對如果我們設定的保證金或任何風格將是相同的更大的寬度或最小寬度我們繼續分配它做我們可以離開它呢？所以，如果我們將邊距設置爲20px 5px，它會一直保持到1200px？同樣的情況下，反向會保持不變，直到它達到360px，然後改變？

這只是一個困擾我的問題。

Answer 1

我認爲使用百分比值來保證金和寬度。你能避免調整問題

Answer 2

的max-width:1200px媒體查詢將適用於所有尺寸小於，這意味着你將不再需要在720px一個再重新申請相同的值。

在比較：

@media screen and (max-width:1200px) { 
    /* applies to all viewports below 1201px */ 
} 

@media screen (min-width:721px) and (max-width:1200px) { 
    /* only applies to viewports above 720px and below 1201px */ 
} 

總之，看到在你的第二個（720px）媒體查詢規則中的數值一樣大，它們應用於兩次（非必要）。