有更好的多媒體查詢或單個媒體查詢

我正在使用引導程序，並且我想（如果適用）每個屏幕大小都有特定的CSS。我想知道是否最好針對每個屏幕尺寸在我自己的CSS表格中查詢每個屏幕尺寸，或者如果我需要在每個需要的位置進行媒體查詢。有更好的多媒體查詢或單個媒體查詢

所以我們可以說我有這對我的標準屏幕尺寸：

.example-class{ 
    padding: 10px; 
}

然後換手機屏幕，我想這一點：

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
}

我應該有在手機屏幕1個媒體查詢它是我的CSS中的所有移動屏幕樣式將會去的部分，或者我應該在每次需要爲移動屏幕定製樣式時進行媒體查詢。

從我所知道的，有多個媒體查詢不一定會影響性能。添加很多會增加CSS文件的大小，這會影響性能。

此外，我想確保我的CSS容易被別人理解。我認爲在每個實例中都需要媒體查詢可能會更容易，這樣一個特定元素的CSS全部在一個位置。

來源

2017-03-15 Dylan Caudill

使用像SASS或Less這樣的CSS預編譯器，所有這些都將消失，您不必擔心它。 – DavidG

對於我瞭解雙方的Webkit和壁虎引擎序列化媒體查詢（我認爲它實際上是一個W3C推薦），所以他們只需要一次評估媒體查詢。

我會說，如果性能是一個問題給你，加載每個案件的具體文件，清除他們的混亂。這樣，您最終會得到幾個較小的文件，並只在需要時加載所需的文件。

如果性能不是問題，我個人認爲CSS文件大小不會增加太多以影響您的網站性能。請記住，調整網頁的大小並不常見，除非您正在測試內容。

作爲一名前端開發人員，如果您的元素CSS全部在一起，而不必通過文件的幾個部分或多個文件來更新，那麼維護CSS會容易得多。

因此，我建議有：

.example-class{ 
    padding: 10px; 
} 

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
}

希望這有助於。

來源

2017-03-15 15:49:06

爲各種屏幕尺寸編寫通用媒體查詢間隔，而不是在必要時編寫媒體查詢，這使代碼更易於管理和擴展。

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
}

爲了使代碼更易讀我們可以基於不同的頁面以及它們各自內容劃分在每個間隔中的代碼段和子區段。

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
}

來源

2017-03-15 15:46:52

有更好的多媒體查詢或單個媒體查詢

回答

相關問題