0

如果屏幕宽度低于某个点，我创建了一个媒体查询来缩小 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 社区调试器进行测试。

谢谢！

4

2 回答 2

0

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

@media screen and (max-width: 733px) {
 #example {
    padding-left: 90px;
 }
}
于 2017-12-27T20:49:50.873 回答
0

尝试将此添加到您的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;
        }
   }

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

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

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

于 2017-12-27T20:51:08.253 回答