媒体查询无效

Question

最初在Code Review上发表这篇文章是因为我希望得到一些关于我的CSS的反馈——对我来说感觉太臃肿了——我被告知它属于Stack Overflow，因为我有一个非功能代码的问题。

我最近花了9个小时建立了一个网站，这是我几年来第一次接触代码，即使这样，我也从来没有很好地使用它。我的工作思路是移动优先，但在建立了基本的网站之后，我试图实现媒体查询，以使网站在更大的屏幕上运行良好……好吧，我的媒体询问完全没有效果。就我所看到的例子而言，我已经正确地格式化了它们，但是它们根本没有产生任何结果。

这是一个包含相关内容的jsfiddle

http://jsfiddle.net/LuGXP/

和所讨论的媒体查询…

@media (min-width:480 px) and (max-width:960 px) {
body {
background:red;
}
}

现在，我将它设置为非常简单的(可能会令人眼花缭乱的)更改，只是为了测试它是否对媒体查询做出了响应。我的实际目标是将布局从移动设备宽度的单列变为双列，然后完全水平，在较大的尺寸上稍微增加字体大小。

事项:

1)我意识到代码可能非常臃肿。我想在某个时候解决这个问题，但我认为先处理一个实际的纯功能问题，然后再把它带回代码审查更有意义。

2)有几行CSS可能对索引页没有多大意义。这些属于其他链接页面，它们共享类似的布局。

如果有任何有用的信息，请告诉我。

Answer 1

像是打错了:http://jsfiddle.net/LuGXP/2/

@media (min-width:480 px) and (max-width:960 px) {

@media (min-width:480px) and (max-width:960px) {

值(480)和单位(px)之间不能有空格

在尝试解决问题时，通常最好使用最少的代码。在您的例子中，您的示例中的大部分代码都是不必要的。

在这一点上，这里有一个简单的例子:http://jsfiddle.net/LuGXP/3/。正如你可能猜到的那样，当主体宽度在480到960倍之间时，背景会变成红色。

body{
    background: green;
}
@media (min-width:480px) and (max-width:960px) {
    body {
        background:red;
    }
}