html - CSS 媒体查询设备纵横比不适用于 16/9

Question

我有一个页面，图像在 16/9 屏幕上被截断。我正在使用媒体查询尝试为具有该纵横比的设备移动图像的位置，但它不起作用。我有一台 1366x768 (16/9) 的笔记本电脑连接到另一台分辨率为 1680x1050 (16/10) 的显示器。我知道媒体查询是正确的，因为如果我将它更改为 16/10 而不是 16/9，则会在较大的显示器上进行更改。

知道为什么这可能不起作用吗？我觉得我已经尝试了一切。

谢谢!

@media screen and (device-aspect-ratio: 16/9) {
    .post-87 .content-container {
         background-position:50% -200px !important; 
}
 }

Answer 1

这可能是因为 1366x768 不完全是 16/9。 1366/16 = 85.375 和 768/9 = 85.333。 1366 和 768 的最大公因数是 2，所以准确的宽高比是 683/384。您可能可以添加一个媒体查询来处理这种情况并解决您的问题。