html - Mozilla 媒体查询移动 View

Question

您好，我正在尝试让我的网站响应。现在我有一个媒体查询，它可以处理特定屏幕尺寸的设备，但在通过网络查看时会处理不同的样式。它在 chrome、safari 和 opera 中工作得很好。但是在 mozilla 中尝试时，尽管我正在通过桌面访问它，但似乎正在执行我的媒体查询。有什么我想念的吗？下面是我的媒体查询

.my-target-class {
   display: inline;
}

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
      .my-target-class {
          display: block;
       }
}

如您所见，我正在定位一个类，如果通过移动设备查看，显示会发生变化。但是在 mozilla 上查看时，它运行 @media 屏幕查询并应用 ng display: block 在类上。对此有任何想法或解决方法吗？如果解释为什么会这样，将不胜感激

正如您在屏幕截图的右下角看到的那样，它应用了适用于移动设备的 css 样式。尽管我正在通过桌面浏览器访问它。我假设如果我放置@media only screen，这只会在移动设备上查看时应用。但似乎 firefox 的行为有所不同

Answer 1

不要把你的代码放在外面。你也必须像这样换行到你的桌面屏幕大小

@media screen and (min-device-width: 300px) and (max-device-width: 800px){
  .my-target-class {
      display: block;
   }
}
@media screen and (min-device-width: 801px) {
  .my-target-class {
      display: inline;
   }
}