媒体查询无效

Question

最初将这个问题发布在Code Review上，因为我希望能得到一些关于我的CSS的反馈 - 这对我来说很臃肿 - 我被告知它属于Stack Overflow，因为我对非功能代码有问题。 / p>

我最近花了9个小时建立一个网站，这是我几年来第一次接触代码，即便如此，我也从来没有太好用过它。我考虑过移动优先方法，但在构建基本网站后，我尝试实现媒体查询，以使网站在更大的屏幕上运行良好。 。 。好吧，我的媒体查询没有影响。据我所见，我已经正确地格式化了它们，但它们根本没有产生任何结果。

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

http://jsfiddle.net/LuGXP/

媒体查询有问题。 。

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

现在，我将它设置为非常简单（并且会引起眼睛灼热）的变化，只是为了测试它是否正在响应媒体查询。我的实际目标是让布局从移动设备宽度的单列变为双列，然后完全水平，在较大的尺寸上略微增加字体大小。

注意事项：

1）我意识到代码可能非常臃肿。我想在某些时候解决这个问题，但我认为首先处理实际的纯功能问题更有意义，然后再将其带回Code Review。

2）有一些CSS可能对索引页面没有多大意义。这些属于其他链接页面，它们具有相似的布局。

如果有更多信息有用，请告诉我。

Answer 1

看起来像一个拼写错误：http://jsfiddle.net/LuGXP/2/

<强> BAD

@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和960x之间时，这将使背景变为红色。

body{
    background: green;
}

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