Question

我有两个类似的媒体查询：

   div { 
  position: fixed; 
    bottom:0%;  
    }
        .buttonStyle {
    padding: 10px 15px;
    font-weight: bold;
    font-size: 9pt;
    outline: none;
    cursor: pointer;
    text-align: center;
    color: black;
    background-color: white;
    margin: 5px;
    font-family: "HelveticaNeue-UltraLight", "Helvetica Ultra Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
                      }

还有这个

@media(max-height: 1100px) and (min-width: 1200px) {

}

我的浏览器屏幕高度为779，如果我的屏幕高度为750px或更小，宽度为1200px或更大，我想做的就是应用CSS代码。如果我的屏幕高度超过750px且宽度超过1200px或更多，也请应用CSS代码。

我在做什么错？目前，我的@media(min-height: 750px) and (min-width: 1200px) { }正在覆盖@media(max-height: 1100px) and (min-width: 1200px)代码。

Answer 1

请尝试以下操作，相信您缺少一两个关键字...此外，如果您希望在小于750的屏幕上应用特定的样式，则需要将max-height设置为750，不是min-height。（我没有在下面更改这些值以反映最大/最小，仅在screen and中添加了该值。）

@media screen and (max-height: 1100px) and (min-width: 1200px) {

}

@media screen and (min-height: 750px) and (min-width: 1200px) {
}

媒体查询和高度问题

1 个答案: