Html 媒体查询不起作用

最初，我在代码评论上发布了这篇文章，因为我希望得到一些关于CSS的反馈——这让我感觉有些臃肿——我被告知它属于堆栈溢出，因为我对非功能代码有问题

我最近花了9个小时建立了一个网站，这是我几年来第一次接触代码，尽管如此，我对它还是不太在行。我考虑的是移动优先的方法，但在构建了基本站点之后，我尝试实现媒体查询，以使站点在更大的屏幕上运行良好，并且。嗯，我的媒体质询完全没有效果。就我从示例中所见，我已经正确地格式化了它们，但它们根本不会产生任何结果

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

还有媒体的质疑

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

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

注意事项：

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

2） 有一些CSS行可能对索引页没有多大意义。这些页面与共享类似布局的其他链接页面相关

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

看起来像是打字错误：

坏的

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

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

好

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

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

值（480）和单位（px）之间不应存在空格

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

至此，这里有一个简化的示例：。正如您可能猜到的，当主体宽度在480到960x之间时，这将使背景变为红色

body{
    background: green;
}

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

---

您遇到的第一个问题是没有HTML：p但除非HTML中有视口元元素，否则媒体查询将无法工作。你有吗？如果有的话，它看起来像什么？正如@ralph.m所指出的，没有任何HTML，我们只是猜测你正在使用的布局。启动一个jsFiddle，我相信你会得到一些帮助。一个jsFiddle已经按照David的建议发布了。在你想要的文档的开头，从@ralph.m获取建议。如果你不包括这一点，大多数移动设备将缩放页面，这不是你想要的。我真的应该想到这一点，但我研究的媒体查询示例在值和单位之间有空格。谢谢你，尽管我现在觉得有点傻！干杯，没问题！这是一个常见的错误。