Question

如果屏幕宽度低于某个点，我创建了一个媒体查询来缩小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" />

（我还使用＆＃34; width =设备宽度，初始比例= 1＆＃34;没有更好的结果）

最后，我还尝试使用@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。在这种情况下，请发布指向您网站的链接或添加更多代码，最好是您的CSS。

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

2 个答案: