媒體查詢從更高分辨率樣式表加載樣式 - 爲什麼？

請有人指出我在正確的方向！我無法使查詢按預期工作。媒體查詢從更高分辨率樣式表加載樣式 - 爲什麼？

所以，我有，例如：

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

在480樣式：

#box{width:100px;height:100px;}

在960樣式：

#box{width:200px;height:200px;}

當我調整瀏覽器以480像素或更少的960風格正在壓倒480風格。我曾嘗試加載一個樣式表中的所有查詢，並試圖使用不同的分辨率單獨的樣式表，但仍然無法正常工作。在Chrome或FF Aurora中進行測試時，沒有任何區別。

我在做什麼錯？謝謝！

來源

2012-10-10 lnvrt

試試這個：

<style> 
@media screen and (max-device-width: 480px), 
screen and (max-width: 960px) { 
#box{width:100px;height:100px;outline:1px solid red;} 
} 
/* Still small! (but scaling up) */ 
@media screen and (min-width: 960px) { 
#box{width:200px;height:200px;outline:1px solid red;} 
} 
</style>

http://jsfiddle.net/sthAngels/EecJD/

來源

2012-10-10 06:22:20

使用這個作爲2個參數（480px和980px）之間的思維對我來說似乎最適合我。謝謝！ – lnvrt

完美的作品對我來說： http://felixebert.de/so-12811458/

是路徑的css文件是否正確？
HTML文檔類型是否正確（<!DOCTYPE html>）？
你是否將ID引用與類引用混合？（#box = <div id="box" />，.box = <div class="box" />）
什麼是768.css？

來源

2012-10-10 03:38:40

嗨菲利克斯，謝謝。我看到你的例子工作正常，但我仍然壓倒一切。到CSS的路徑是正確的。在Firebug中，你可以看到480被劃掉的樣式和960被使用的樣式... – lnvrt

媒體查詢從更高分辨率樣式表加載樣式 - 爲什麼？

回答

相關問題