CSS媒体查询在谷歌浏览器上无法正常工作答案

【问题标题】：css media query not working properly on google chromeCSS媒体查询在谷歌浏览器上无法正常工作
【发布时间】：2017-09-12 11:06:02
【问题描述】：

我正在努力在一周或更长时间内用 php 创建我的网站，我的所有媒体查询都按定义正常工作...... @media 屏幕和（最大宽度：768px） @media 屏幕和（最大宽度：600 像素） ...但突然 chrome 停止正常工作并在 960px 的宽度和 750px 的宽度上显示 768px 的内容 而不是 600px。我一次又一次地刷新了 chrome 甚至缓存，但没有结果。但 EADGE 工作正常。在开发网站或其他过程中经常刷新chrome是否有任何问题？请在这种奇怪的情况下帮助我。

@media screen and (max-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (max-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (max-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

【问题讨论】：

请给我们看一些代码，以便我们找出问题所在。
欢迎来到 Stack Overflow！请查看tour，环顾四周，并通读help center，尤其是How do I ask a good question? 请使用runnable minimal reproducible example 更新您的问题，使用Stack Snippets ( [<>] 工具栏按钮）。我们无法帮助您处理我们看不到的代码/标记/样式。
让我这样说：如果你不提供一些代码，你只是在浪费你的时间；你永远不会得到答案。
是的，我已经用编码更新了我的问题...

标签： javascript php html css google-chrome

【解决方案1】：

我发现我犯的错误是我已将我的 chrome 浏览器缩小到 67%，这导致了宽度缩放问题。现在，当我返回 100% 缩放时，一切正常。

【讨论】：

这对我有用，在我的情况下，浏览器缩放到 80%，这就是媒体查询无法正常工作的原因，我已经缩放到 100%，现在可以工作了。

【解决方案2】：

几年前我在 Chrome 中看到了一些奇怪的行为，主要是当它没有从 GPU 呈现页面时（查看此链接以获取一些信息：Chrome and Media Queries Bug）。但是当时那里提供的解决方案对我有帮助，所以将transform: rotateZ(0deg); 放在body 元素上。但是没有代码示例，这是我能做出的最好的猜测。干杯

【讨论】：

【解决方案3】：

您应该尝试使用 min-width 而不是 max-width。我正在与你分享更改代码，试试吧。

@media screen and (min-width: 900px) { 
.side-btn{
    font-size: 100%;
    margin: 4px 5px;
    padding: 3% 3%;
}
}
@media screen and (min-width: 768px){
.nav1 ul li{
    clear: both; 
    width: 100%;
    border-right: none;     
    border-bottom: 1px solid grey;      
}
.nav2 {     display: block; }
.navul{     display: none;  }

}
@media screen and (min-width: 600px) {
.startmenu,.itemhead{   font-size: 100%;}
.side-btn{
    font-size: 80%;
    margin: 4px 3%;
    padding: 3% 3%;
}
.itbody{ height: 340px; }
.custom{
    margin-top: 3px;        
    width: 100%; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.inqbasket{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}
.ifcol1{    width: 100%;    }
.ifcol2{    width: 100%;    }

}

【讨论】：