Question

请有人指出我正确的方向！我无法让查询按预期工作。

所以，我有例如：

<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;}

当我将浏览器的大小调整为480px或更低时，960风格将覆盖480风格。我已经尝试在一个样式表中加载所有查询，并且我尝试使用不同的样式表用于不同的分辨率，但仍然无法正常工作。在Chrome或FF Aurora中进行测试时，它没有任何区别。

我做错了什么？谢谢！

Answer 1

完美适合我： http://felixebert.de/so-12811458/

css文件的路径是否正确？
HTML文档类型是否正确（<!DOCTYPE html>）？
您是否将id-reference与类引用混合使用？（#box = <div id="box" />，.box = <div class="box" />）
768.css中有什么？

Answer 2

试试这个：

<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/

媒体查询从更高分辨率的样式表加载样式 - 为什么？

2 个答案: