使用CSS @media查詢時，默認樣式表的最佳做法是什麼？

Question

我剛剛發現CSS @media queries，我覺得他們太棒了！但是，我知道並非所有瀏覽器都支持它們（即除最新版I.E以外的所有瀏覽器）。

我應該怎麼做，然後在我的默認樣式表中？我應該瞄準一個正常大小的屏幕嗎？我應該走最低公分母並加載移動樣式表嗎？還是應該讓設計完全流暢？

當爲不支持@media查詢的瀏覽器製作默認樣式表時，通常是一個很好的計劃？

Answer 1

這取決於您是採用de'mobile first'方法還是'desktop first'。

桌面首先不應該對不支持@media的桌面瀏覽器造成任何麻煩，因爲他們會忽略移動樣式表規則，就像他們應該那樣。唯一的問題是不支持媒體查詢的移動瀏覽器。他們將呈現如在桌面上看到的頁面。但大多數智能手機都支持媒體查詢，但win7以前的手機除外。問題是如果你想支持這些手機。 你的樣式表應該看起來像這樣。

body { 
    width: 960px; 
    margin: 0 auto; 
} 
@media only screen and (max-width: 500px) { 
    /* override desktop rules to accommodate small screens*/ 
    body{ 
    width: auto; 
    margin: 0; 
} 

另一種方法是先移動。您爲移動設備創建一個基本樣式表，然後使用mediaqueries來爲桌面用戶進行思考。您可以將桌面規則放在單獨的文件中，並使用媒體查詢和條件註釋將其加載到現代桌面瀏覽器和IE中。但是這裏的問題是IE移動也支持條件註釋，所以沒有預先win7手機的支持。你的html應該看起來像這樣：

<link rel="stylesheet" href="/css/basic.css" /> 
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" /> 
<!--[if lt IE 9]> 
<link rel="stylesheet" href="/css/desktop.css" /> 
<![endif]--> 

讓你的設計流體將會有很大的幫助。目標是無論屏幕大小如何，您的網站總是會看起來不錯。只需調整窗口大小即可嘗試。如果屏幕變窄，流體設計無法讓側欄移動到底部。爲此，您需要媒體查詢。

祝你好運