媒體查詢 - 獨立和獨立的樣式表？

在index html文檔頭部使用媒體查詢，是否可以告訴訪問者瀏覽器獨立於原始樣式表使用單獨的樣式表？媒體查詢 - 獨立和獨立的樣式表？

目前，我使用的mobile_specific樣式表除了原來的風格變得棘手。

<link type="text/css" media="screen" href="styles.css" rel="stylesheet"> 

<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">

因此，除了styles.css，還使用syles_mobile.css。 如何告訴瀏覽器只使用「styles_mobile.css」而不是兩個樣式表一起使用？

來源

2012-05-10 Doug Fir

添加媒體查詢到正規的樣式誰是你的移動查詢的oposite：

<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)"> 

<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

PS：我建議你使用屬性的標準次序。並且type屬性不是必需的，因爲它的默認值爲text/css，鏈接和樣式元素以及默認值text/javascript在腳本元素上。

來源

2012-05-10 18:06:28

謝謝，但我在這裏有點困惑。我應該在哪裏添加你建議的代碼？在index.htm文檔的頭部？你的第一句話聽起來像我將代碼添加到實際的樣式表？你能澄清嗎？乾杯。 –

@DougFirr此代碼與您發佈的代碼相同，但在'styles.css'鏈接上有媒體查詢。當屏幕大於480px時，你想加載'styles.css'，當屏幕小於480px時加載'styles_mobile.css'。這正是這些媒體查詢所做的。 –

期待回家試試這個 - 非常感謝！ –

媒體查詢 - 獨立和獨立的樣式表？

回答

相關問題