@media Query 在 IE、Firefox 和 Edge 中工作，但不 Chrome

Question

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

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

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

经过一些研究，我在 HTML header 中添加了视口条目的细微变化，目前我在 <head></head> 中的条目是：

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

（我也用过"width=device-width, initial-scale=1"，没有更好的结果）

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

关于一些最后的细节，我的 html 文件是一个 cshtml 文件，如果它有所不同（这是一个 webapp），我正在通过 VS2017 社区调试器进行测试。

谢谢！

Answer 1

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

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

Answer 2

尝试将此添加到您的 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。在这种情况下，请 post 一个 link 到您的站点或添加更多代码，最好是您的 CSS.

@media Query 在 IE、Firefox 和 Edge 中工作，但不 Chrome

@media Query Working in IE, Firefox, and Edge, but not Chrome

html

css

google-chrome

media-queries

dynamic-resizing