html - 媒体查询无效

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