多个媒体查询不起作用

Question

我有点困惑，因为我习惯于 CSS 使用媒体查询...我以前从未遇到过这个问题。只有第一个媒体查询运行良好......我很少有像这样的特定尺寸的媒体查询：

/* - IPAD LANDSCAPE - */

@media screen and (max-width: 1024px) and (orientation: landscape){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 24vw top 3.5vh, right 21vw top 1vh;
  }
  header object{
    left:16vw;
    width:18vw !important;
  }
  header p{
    font-size:14px;
    top:16vh;
    left:-2vw;
  }
}

/* - IPAD PORTRAIT - */

@media screen and (max-width: 768px) and (orientation: portrait){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 28vw top 3.5vh, right 17vw top 1vh;
  }
  header object{
    left:10vw;
    width:24vw !important;
  }
  header p{
    font-size:20px;
    top:10vh;
    left:-2vw;
  } 
}

/* - PHONE LANDSCAPE - */

@media screen and (max-width: 750px) and (orientation: landscape){
  /*...*/
}

/* - PHONE PORTRAIT - */

@media screen and (max-width: 450px) and (orientation: portrait){
  /*...*/
}

我试过使用和不使用 orientation 参数...我什至无法弄清楚为什么我的代码运行不正常... 我看了几个关于这个的话题，但对我没有帮助...

感谢您的帮助:-)

编辑：

我是第一次使用 Bootstrap，它对媒体查询有什么影响吗？

编辑 2：

我在使用 Bootstrap 时看到类似 @media screen and (max-width:screen-sm-max) 的内容，我应该使用这个而不是 pxvalue 吗？我想还是一样吧...

Answer 1

尝试将最小的@media 查询宽度代码块放在首位。

/* - PHONE PORTRAIT - */
@media screen and (max-width: 450px) and (orientation: portrait){
  /*...*/
}

/* - PHONE LANDSCAPE - */
@media screen and (max-width: 750px) and (orientation: landscape){
  /*...*/
}

/* - IPAD PORTRAIT - */
@media screen and (max-width: 768px) and (orientation: portrait){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 28vw top 3.5vh, right 17vw top 1vh;
  }
  header object{
    left:10vw;
    width:24vw !important;
  }
  header p{
    font-size:20px;
    top:10vh;
    left:-2vw;
  } 
}

/* - IPAD LANDSCAPE - */
@media screen and (max-width: 1024px) and (orientation: landscape){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 24vw top 3.5vh, right 21vw top 1vh;
  }
  header object{
    left:16vw;
    width:18vw !important;
  }
  header p{
    font-size:14px;
    top:16vh;
    left:-2vw;
  }
}

它为我解决了这类问题。 Boostrap 文档也遵循这种结构。（这里@screen-sm-min 是你可以设置的变量，感谢LESS/SASS，但你不能用固定数字替换它）

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

如果对您有帮助，我个人会使用类似的东西：

@media (max-width:767px) {}

@media (max-width:767px) and (orientation:landscape) {}

@media (min-width:768px) and (max-width:991px) {}

多个媒体查询不起作用

Multiple media queries aren't working

css

media-queries