@Media查询（min-width）CSS不适用于某些分辨率

Question

（复制，因为我的上一个问题失去了牵引力，清理了一些不需要的信息并添加了其他相关信息）

我的任务是开发一个Wordpress网站，并且一直在摆弄CSS。我现在遇到@media查询问题

我只需要为3个分辨率（公司标准）开发网站。我不明白自动缩放在网站中是如何工作的，所以我决定对3种特定分辨率（1920x1080,1440x900,1024x768）中的每一种进行硬编码。

在这种情况下，它用于侧边栏（其他元素也不起作用）。我一直在做的位置变化（右：## px）不适用于1440x900用户，而是覆盖1024x768用户的更改。

以下是代码：

1024x768用户

 @media (min-width : 768px){
    .sidebar{
        right: 115px;
    }
 }

1440x900用户

 @media (min-width : 900px){
    .sidebar{
        right: 555px;
    }
 }

1920x1080用户

 @media (min-width : 1080px){
    .sidebar{
        right: 155px;
    }
 }

（Imgur链接了更多图片和信息：http://imgur.com/a/hMWIp）

Answer 1

您正在将媒体查询应用于所需分辨率的高度，而不是宽度。 例如，对于您写的解决方案1920x1080：

@media (min-width : 1080px){
        .sidebar{
            right: 155px;
    }
}

但它应该是：

@media (min-width: 1920px) {
        .sidebar {
            right: 155px;
    }
}

无论如何，因为它是一个级联样式表，最后一个媒体查询将覆盖以前的媒体查询。

Answer 2

经过多次挖掘后，我发现1440x900分辨率实际上是从1920x1080部分接收更改。

不是100％确定为什么会这样，除了一次开发这两种尺寸之外我没有其他工作。

如果其他人将来有这个问题，请发布此信息。