Question

我的屏幕分辨率是：1280 x 768

我有两个查询，但是最后激活的任何一个都被使用，这不是我想要的。被激活的是：1280 x 720.我没有得到的是我的屏幕是1280 x 768？为什么不起作用？

屏幕1280 x 768：

@media only screen 
  and (min-device-height: 768px) 
  and (max-device-width: 1280px) 
  and (orientation: landscape) 
{
body {
        background-color: lightgreen;
    }
}

屏幕1280 x 720：

@media only screen 
  and (min-device-height: 720px)  
  and (max-device-width: 1280px)
  and (orientation: landscape) 
{
body {
        background-color: blue;
    }
}

Answer 1

device-width / device-height已被弃用

此功能已从Web标准中删除。一些   浏览器可能仍然支持它，它正在被删除。   避免使用它并尽可能更新现有代码;见the compatibility table。请注意，此功能可能会停止工作   在任何时候。

在这种情况下，当使用min-*时，具有最高高度值的查询需要是最后一个，否则它不起作用

如果你使用min-height，我想你会得到预期的结果

请注意，这不是计算机的屏幕宽度，它是浏览器视口，因此如果您的计算机屏幕是1280x768，则需要全屏运行浏览器才能使其正常工作

@media only screen and (min-height: 720px) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) {
  body {
        background-color: lightgreen;
    }
}

如果您还希望此功能仅在max-width的屏幕上使用，请执行此操作

@media only screen and (min-height: 720px) and (max-width: 1280px) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) and (max-width: 1280px) {
  body {
        background-color: lightgreen;
    }
}

当然，有限的景观将会是这样的

@media only screen and (min-height: 720px) and (max-width: 1280px) and (orientation: landscape) {
  body {
        background-color: blue;
    }
}
@media only screen and (min-height: 768px) and (max-width: 1280px) and (orientation: landscape) {
  body {
        background-color: lightgreen;
    }
}

媒体查询未设置正确的屏幕分辨率

1 个答案: