移动设备的 CSS 媒体查询不起作用答案

【问题标题】：CSS Media Queries For Mobile Devices Not Working移动设备的 CSS 媒体查询不起作用
【发布时间】：2016-11-28 05:41:52
【问题描述】：

我正在处理媒体查询，以开始让我的网站更具响应性。但是，媒体查询在我的 PC (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>

【问题讨论】：

尝试远程调试网页。一切看起来都很好，它应该可以工作。此外，手机使用非常重的缓存，因此请尝试使用隐私浏览选项卡以确保应用您的新样式。
1281px 的屏幕仍然会触发@media (min-width:320px)。您应该尝试使用范围。
我同意范围。现在，我只是想让它工作。我尝试在我的 iPad 和 iPhone 上的 Chrome 中打开一个“隐身标签”，但查询仍然没有生效......当我在设备上看到该页面时，#mainText 的文本是黑色的......
您的 CSS 中是否有一些重要的东西可能会覆盖您的规则？
看起来您在文本中添加了过滤器亮度。因为您没有使用 webkit 前缀 chrome 只是忽略它。试试把滤镜亮度去掉 1% 看看有没有帮助

标签： css media-queries

【解决方案1】：

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

filter: brightness(1%);

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

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

干杯，编码快乐！

【讨论】：

我用什么选择器来做这个？我似乎有同样的问题。另外，你是怎么看出 mwilson 有过滤器的？
@JimJimL 只要类名在 HTML 中匹配，您就可以使用任何选择器。我只是查看了 chrome 上的开发人员控制台，发现 chrome 没有应用该样式。干杯！
现在我很困惑，你从哪里让他的应用/网页通过开发者工具中的css？我看不到它在任何地方链接。这是否也意味着我需要对所有对象应用亮度（1%）！？我确定我在这里遗漏了一些东西。
如果您发布问题，我可以查看您的代码。在 cmets 中尝试计算东西有点困难。我使用 FF，它向我展示了开发工具中规则的来源。您不必应用它，仅当您希望该元素的亮度为 1% 时。

【解决方案2】：

由于您的查询可能会覆盖自身，请尝试类似的操作为您的查询指定最小和最大宽度，始终比前一个小/大 1px

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

【讨论】：