移动设备不工作的CSS媒体查询

我正在处理媒体查询，以使我的网站更具响应性。然而，媒体查询在我的个人电脑（Chrome）上运行得很好，但在移动设备（iPad和iPhone）上观看时，媒体查询似乎没有效果。我的头部有视口标记，但我猜我遗漏了其他东西

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

HTML

<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<div id="mainText">
    <h1>Text</h1>
    <h2>Text</h2>
</div>

正文
正文

您的css中似乎有一个过滤器

filter: brightness(1%);

现在，因为您没有为webkit添加任何供应商前缀，chrome只是决定忽略它。您可以删除此规则，也可以将以下内容添加到css中

-webkit-filter: brightness(1%);
filter: brightness(1%);

---

干杯，快乐编码

由于您的查询可能会覆盖自身，请尝试类似的操作 为查询指定最小和最大宽度，这些宽度总是比上一个小1倍/大1倍

 @media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText {
        color: pink;
    }
}
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText {
        color: blue;
    }
}
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText {
        color: red;
    }
}
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText {
        color: yellow;
    }
}
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText {
        color: green;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText {
        color: purple;
    }
}

---

尝试远程调试网页。一切看起来都很好，应该能行。另一方面，手机使用了很重的缓存，因此请尝试使用私人浏览选项卡，以确保应用了新的样式。1281px的屏幕仍将触发@media（最小宽度：320px）。你应该试试射程，我同意射程。现在，我只是想让它发挥作用。我试着在我的iPad和iPhone上的Chrome浏览器中打开一个“隐姓埋名标签”，但查询仍然没有生效。。。当我在我的设备上看到页面时，#mainText的文本是黑色的……你的css中是否有重要的内容可能会覆盖你的规则？看起来你在文本中添加了一个过滤器亮度。因为您没有使用webkit前缀，所以chrome只是忽略了它。尝试删除1%的滤镜亮度，看看这是否有帮助我应该使用什么选择器？我似乎也有同样的问题。另外，你是如何看到mwilson有一个过滤器的？@JimJimL只要类名在HTML中匹配，你就可以使用任何选择器。我只是浏览了一下chrome上的开发者控制台，发现chrome没有应用这种风格。干杯现在我很困惑，你从哪里得到他的应用程序/网页来通过开发者工具中的css？我看不到它链接到任何地方。这是否意味着我需要将亮度（1%）应用于我的所有对象！？我肯定我这里遗漏了什么。如果你发一个问题，我可以查看你的代码。要想在评论中找到一些东西有点难。我使用FF，它向我展示了规则在开发工具中的来源。你不必应用它，只有当你想要这个元素的亮度为1%的时候。