2013-04-22 52 views
1

CSS媒體查詢定義在哪裏?即我應該從我的HTML這樣打電話給他們:CSS Media Queries - 他們應該在哪裏定義?

<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" /> 
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" /> 

或者我應該維護一個CSS文件並在那裏定義媒體查詢?

回答

1

無論什麼最適合你,真的。

我個人更喜歡在我的主CSS文件中定義它們,以及它們影響的規則。例如:

#someElement {font-size:24pt;} 
@media all and (min-width:350px) { 
    #someElement {font-size:12pt} 
} 

這使它們保持在一起,所以我不會失去它們的蹤跡。這也意味着更少的HTTP請求。

+0

你如何處理IE8以前的版本?你仍然可以在主HTML(<! - [if lt IE 9&!IEMobile]>)中使用條件語句來做到這一點。 – bbuller 2013-04-22 21:52:48

+1

你可以,但我認爲如果人們不讓Windows Update升級瀏覽器,那我爲什麼要打擾他們呢? – 2013-04-22 21:58:30

0

就我個人而言,我會把所有內容都放在一個文件中。你可以(或應該)通過使用像css預處理器或sass一樣的代碼來管理代碼的大小和結構。這樣,您可以在多個文件中開發,並在將它們上載到Web服務器之前將它們合併/最小化。

使用單個文件的主要原因是速度。通常一個額外的請求需要更長的時間,然後下載幾個額外的千字節。這也是雅虎和谷歌等「大戶」的建議......

相關問題