css媒體查詢，一個或多個用於移動設備優化

Question

我知道使用媒體查詢移動設備的第一種方式應該使移動設備上的網站更快。我不知道是否有在使用大量的媒體查詢的差別，就像這樣：

#first {} 

@media screen and (min-width: 37.5em) { 
    #first {} 
} 

#second {} 

@media screen and (min-width: 37.5em) { 
    #second {} 
} 

，而不是使用一個大的所有桌面的風格，就像這樣：

#first {} 

#second {} 

@media screen and (min-width: 37.5em) { 
    #first {} 

    #second {} 
} 

哪個更好，對於表演還是重要？我認爲在處理很多風格時，第一種方法更容易閱讀。

Answer 1

他們都做同樣的事情，讓第二種方法更好的唯一的事情是，你不重複自己。您將代碼保持爲DRY，並且所有內容都位於同一媒體查詢中的一個位置。每次加上@media屏幕重寫都會讓人感到痛苦和耗時。