@media 查询在 IE、Firefox 和 Edge 中工作，但不适用于 Chrome答案

【问题标题】：@media Query Working in IE, Firefox, and Edge, but not Chrome@media 查询在 IE、Firefox 和 Edge 中工作，但不适用于 Chrome
【发布时间】：2018-06-08 11:04:15
【问题描述】：

如果屏幕宽度低于某个点，我创建了一个媒体查询来缩小 div（在本例中为#example）的填充。请参阅下面的示例。

@media screen and (max-width: 733px) {
#example {
    padding-left: 90px;
    }
}

此查询在 IE 11、Firefox Quantum 和 Edge 中完美运行。但是，当我在 Chrome 中对其进行测试时，我得到的结果与查询不存在一样。

在做了一些研究之后，我在我的 HTML 标头中添加了一个视口条目的细微变化，目前我在 <head></head> 中的条目是：

<meta name="viewport" content="width=device-width" />

（我也使用了“width=device-width, initial-scale=1”但没有更好的结果）

最后，我也尝试过使用@media only screen 代替@media screen，但也没有用。

对于一些最终的细节，我的 html 文件是一个 cshtml 文件，如果它有所作为（这是针对 web 应用程序），我正在通过 VS2017 社区调试器进行测试。

谢谢！

【问题讨论】：

标签： html css google-chrome media-queries dynamic-resizing

【解决方案1】：

尝试将此添加到您的CSS：

@media screen and (max-width:733px),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx)
   {
        #example
        {
            padding-left: 90px;
        }
   }

这个到 HTML 文档的 <head> 部分：

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

此代码已经过测试并且可以工作。如果它对您不起作用，则您的代码中的其他地方可能有问题，可能是您的CSS。在这种情况下，请发布指向您网站的链接或添加更多代码，最好是您的CSS。

【讨论】：

【解决方案2】：

您的代码缺少大括号“}”。下面是正确的代码：

@media screen and (max-width: 733px) {
 #example {
    padding-left: 90px;
 }
}

【讨论】：

谢谢约翰。在编辑示例代码以使其对我的问题更通用时，我不小心遗漏了一个括号。我已经编辑了问题，并检查了实际代码以确认没有括号错误。