對不同媒體查詢中元素的重複值

Question

我試圖清理我的巨大媒體查詢，並且刪除了與默認元素值相同的元素值中的所有更改，以便它們會顯示出來。

我的問題是當重複值存儲在單個媒體查詢中時我有什麼選擇？

下面是一個例子：

@media only screen and (min-width: 480px) and (max-width: 767px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

@media only screen and (max-width: 479px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

我有很多的不屬於媒體查詢的內部副本以及元素值的變化，所以我不能把它們連。還有其他的選擇嗎？

Answer 1

如果沒有看到您確切的代碼庫（或真實世界的例子），很難協助具體細節。通過上面的例子，我會建議爲每個元素設置一個基類，這樣你就不會一遍又一遍地重複這些樣式。

編輯：作爲使用基類的一個例子，對於上面的代碼，您可以創建以下類並將其添加到每個要使用這些樣式屬性的元素中（所有圖標元素）：

.standard-icon { 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

這將消除一大塊重複的代碼並創建一個更模塊化的網站設計。

就媒體查詢/重複值而言，以下是我如何處理與我合作的網站上的響應式項目。我認爲有三種主要設備尺寸，desktop,tablet和mobile。所以，如果我在兩個或多個設備的大小製作的圖標，例如使用默認樣式，我會做到以下幾點：

/* Default styling */ 
.icon-example { 
    width: 40px; 
    height: 40px; 
    margin: 40px 0; /* Style which spans two or more queries */ 
    color: white; 
    background: black; 
} 

@media @mobile-grid { 
    margin: 30px 0; /* Overriding this style only on mobile */ 
} 

現在我沒有申報爲每個媒體查詢margin值，只是將它覆蓋，將是不同的。我還建議查看和使用像Sass或LESS這樣的CSS預處理器。它們使用起來非常簡單，並有助於儘可能讓代碼儘可能幹。祝你好運！