Mozilla媒体查询移动视图-Java 学习之路

嗨，我正在尝试使我的网站响应 . 现在，我有一个媒体查询，可以处理特定屏幕尺寸的设备，但在通过网络查看时具有不同的样式 . 它适用于铬，野生动物园和歌剧 . 但是当在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;
       }
}

正如你所看到的那样，我正在瞄准一个clas，如果通过移动设备观看，则显示会发生变化 . 但是在mozilla上查看它运行@media屏幕查询并在类上应用ng display：block . 对此有何想法或解决方法？如果解释为什么它的行为像这样，将不胜感激

enter image description here
正如您在屏幕截图右下角所见，它通过桌面浏览器进行访问 . 我假设如果我放置@media only屏幕，这只会在移动设备上查看时应用 . 但似乎Firefox的表现不同

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;
   }
}

回复于 2024-05-05T02:22:59+08:00

Mozilla媒体查询移动视图

1 回答

相关问题