1

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

所以，我有例如：

<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 中对其进行测试时，没有区别。

我究竟做错了什么？谢谢！

4

2 回答 2

1

非常适合我： http: //felixebert.de/so-12811458/

  • css文件的路径是否正确？
  • HTML Doctype 是否正确 ( <!DOCTYPE html>)？
  • 您是否将 id-reference 与 class-reference 混合在一起？(#box = <div id="box" />, .box = <div class="box" />)
  • 768.css 中有什么？
于 2012-10-10T03:38:40.457 回答
0

尝试这个：

<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-10T06:22:20.290 回答