我從未使用媒體查詢，我真的不確定我的代碼是否可以在所有設備上正常工作。因此，我想請您根據您的經驗和知識發表看法，並告訴我某些特殊/任何設備上可能出現的問題。使用媒體查詢的最佳方式
一些閱讀後，我決定去那麼簡單，我想辦法和使用簡單的規則：
@media (max-width:504px){
/* My style for mobile/ipad etc */
}
@media (min-width:505px){
/* My style for laptops/desktop etc */
}
IMO它仍然是最好編寫CSS兩個顯示器尺寸之一，然後重寫媒體查詢的樣式。 Fo ex。移動第一種方法：
#some-element { font-size: 2em; }
.container { color: red; }
.another-class { width: 100px; }
@media (min-width: 505px) {
#some-element { font-size: 1.5em; }
.container { color: blue; }
}
這樣有兩個好處：
是的，謝謝。當然你是對的。我沒有提到它，但我承認它。 – phudraig
阿圖爾答案是正確的，舊的瀏覽器IE7一樣不支持媒體查詢，但媒體查詢的設計主要是用於現代人的瀏覽器，所以創建一個備用CSS並不是十分必要，除非你想，主要是因爲一些CSS屬性（隱藏某些元素，例如display：none）將不起作用，因此您的網頁設計將失去用途。每個網頁設計師都有自己寫CSS的方式，但我喜歡這種方法：
body, html{
width:100%;
margin:0;
/* Base CSS that will affect all resolutions */
}
#elements-up-to-320px{
/* CSS for elements up to first media query */
}
@media (min-width:320px){
/* CSS for elements from 320px and up until next media query */
}
@media (min-width:480px){
/* CSS for elements from 480px and up until next media query */
}
這種方式是更容易理解和最後的CSS媒體查詢將適用於更高的屏幕尺寸。
有趣。謝謝。 – phudraig
有使用媒體查詢不止一個正確的方式。您的方法似乎有效，但您可以引入更多級別，例如平板電腦，桌面。看一看CSS框架，比如Bootstrap或Foundation。看看他們的網格系統，它可能會給你一些想法。 –
檢查這個職位，它有一些情況可能是有趣的http://stackoverflow.com/questions/7364109/best-way-to-use-media-queries-for-mobile-designs – LGSon
如果你只針對移動/平板電腦設備（當然還有新的瀏覽器），請按照其他答覆者的建議繼續使用它。 如果沒有，一些確實有你想要使用的方法/屬性，有些不會（甚至更新的瀏覽器）。 一種做法是使用「漸進式增強」，這就是說，讓您的網站在沒有太花哨/酷炫的東西的情況下工作，因此那些具有古老（或缺少功能）瀏覽器的瀏覽器仍然可以查看您的網站。 然後，您可以使用更新的功能「增強」它，其中媒體查詢功能非常適合在手機和平板電腦等較小顯示屏中顯示內容。 – LGSon