Mozilla媒体查询移动视图

时间:2017-12-22 20:41:37

标签: html css twitter-bootstrap css3 media-queries

您好,我试图让我的网站响应。现在,我有一个媒体查询,可以处理特定屏幕尺寸的设备,但在通过网络查看时具有不同的样式。它适用于铬,野生动物园和歌剧。但是当我在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 正如您在屏幕截图右下角所看到的,它应用了适用于移动设备的CSS样式。虽然我通过桌面浏览器访问它。我假设如果我放置@media only屏幕,这只会在移动设备上查看时应用。但似乎firefox表现得与众不同

1 个答案:

答案 0 :(得分:0)

不要把你的代码放在外面。您必须像桌面一样包装到桌面的屏幕尺寸

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