@media Query可在IE，Firefox和Edge中使用，但不能在Chrome中使用
[英]@media Query Working in IE, Firefox, and Edge, but not Chrome
问题描述
I have created a media query to shrink a div's (#example in this case) padding if the screen width goes below a certain point. 
我创建了一个媒体查询来缩小div的填充（在这种情况下为#example），如果屏幕宽度低于特定点。 See the example below. 请参见下面的示例。
@media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
This query works perfectly in IE 11, Firefox Quantum, and Edge. 该查询可在IE 11，Firefox Quantum和Edge中完美运行。 However, when I test it in Chrome, I get the same result as if the query wasn't even there. 但是，当我在Chrome浏览器中对其进行测试时，即使没有查询，也会得到相同的结果。
After doing some research, I have added slight variations of a viewport entry in my HTML header, and at the moment my entry in <head></head> is: 经过研究后，我在HTML标头中添加了视口条目的细微变化，目前在<head></head>条目是：
<meta name="viewport" content="width=device-width" />
(I have also used "width=device-width, initial-scale=1" with no better result) （我也使用了“ width = device-width，initial-scale = 1”，但没有更好的结果）
Lastly, I have also tried using @media only screen instead of @media screen , and this has not worked either. 最后，我也尝试过使用@media only screen而不是@media screen ，但这也不起作用。
For some final details my html file is a cshtml file if it makes a difference (this is for a webapp), and I am testing through the VS2017 Community debugger. 对于一些最终细节，我的html文件是否有区别（这是针对webapp的）是cshtml文件，我正在通过VS2017社区调试器进行测试。
Thank you! 谢谢！
2 个解决方案
解决方案1
0 2017-12-27 20:49:50
Your code is missing a brace "}". 您的代码缺少大括号“}”。 Below the correct code: 在正确的代码下面：
@media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
解决方案2
0 已采纳 2017-12-27 20:51:08
Try adding this to your CSS : 尝试将其添加到您的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;
}
}
and this to the <head> section of the HTML document: 这是HTML文档的<head>部分：
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
This code is tested and works. 此代码已经过测试并且可以工作。 If it doesn't work for you, you might have problems somewhere else in your code, possibly your CSS . 如果对您不起作用，则您的代码中可能还有其他问题，可能是CSS 。 In that case please post a link to your site or add some more code, preferably your CSS . 在这种情况下，请发布到您网站的链接或添加更多代码，最好是CSS 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.