CSS 媒体查询未按预期工作答案

【问题标题】：CSS Media Queries not working as intendedCSS 媒体查询未按预期工作
【发布时间】：2018-06-12 15:38:58
【问题描述】：

第二个媒体查询工作正常 - (min-width: 601px) 和 (max-width: 992px) - 但第一个不起作用 - (max-width: 600px )。

我错过了什么吗？因为即使我将 min-width 添加到第一个它仍然不起作用。

.center {
 font-size:70px;
 color:white;
 position: absolute;
 height: 50px;
 top: 40%;
 left: 30%;
 margin-left: -50px; /* margin is -0.5 * dimension */
 margin-top: -25px; 
 text-align: center;
 font-family: "Josefin Sans";
 font-weight: bold;
}

@media only screen and (max-width: 600px){
body {
   background-color: olive;

 }
.center{
  margin-left:-135px;
  font-size:60px;
 }
}

@media screen and (min-width: 601px) and (max-width: 992px){
body {
   background-color: blue;
 }
}

【问题讨论】：

它对我有用。但是，如果超过 992px，它应该有什么背景颜色？
如果您调整大小，浏览器会发生什么情况？
在没有only的情况下尝试@media screen and (max-width: 600px)
@Naomi 我使用上面的背景网址。当你调整我的浏览器大小时，只有第二个媒体声明有效。
@AkashPinnaka 只有第二个媒体声明有效。

标签： css

【解决方案1】：

您的代码中有一些点删除它（见图）

Here is working one:https://jsfiddle.net/tben7qz8/4/

你可以试试@media screen and (max-width: 600px) 没有only

【讨论】：

【解决方案2】：

括号后面有一个隐藏的符号。注意到当我发布代码时。

【讨论】：