CSS媒體查詢的正確方法

Question

這個問題不是關於什麼CSS媒體查詢，而是更多關於什麼是正確的用法。

所以我打算在桌面上創建/平板電腦觀看時會有輕微的UI分歧一些流體頁/移動

所以我的問題是;

1. 爲1頁，我應該創建桌面/移動/平板電腦不同的CSS文件，然後使用

link href="desktop.css" media="..." 
link href="ipad.css" media="..." 

打電話給他們，或使用單/普通CSS和有媒體內的查詢就像

Common.css

@media .... //桌面風格

@media .... // iPad的風格

我的意思是將有單獨的CSS創造一定的滯後性，要進行多個HTTP請求的博茲..即使對於桌面，在較小/擠壓的瀏覽器大小，我可以切換到移動CSS ..所以將單獨的CSS創建一些滯後？

1. 在定義媒體查詢時是否有任何順序要遵循，從未來的兼容性觀點來看，這將有所幫助。現在讓我們來說說，我只想支持桌面和iPad ......但是在將來，我還想支持iPhone ...... 那麼聲明媒體查詢的正確方式/順序應該是什麼？

只是要添加，我還沒有100％決定是否使用寬度或設備寬度，但你可以假設他們中的任何一個（最可能它將是設備寬度）並提供你的建議。 。

謝謝。

Answer 1

1. 使用單個文件，因爲它的一個請求，因爲它可以更有效地gzipped。
2. 媒體查詢順序無關緊要，如果它們不重疊。 （他們可以像普通的CSS一樣操作 - 即，如果您有（最小寬度：320px）和（最小寬度：480px）的媒體查詢 - 並且您的屏幕是1920px - 那麼這兩個查詢將被處理）。

如果您想了解更多關於他們：這裏有Good，Bad和Ugly兩側。