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

Question

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

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

屏1280 * 768：

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

屏幕1280×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，我猜你会得到预期的结果

注意，这不是计算机的计数屏幕宽度，它的浏览器视窗中，所以如果你的电脑屏幕是1280×768，你需要全屏运行的浏览器，它的工作

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