css - 移动绝对； 1600 分辨率的元素与媒体查询

Question

我有一个按钮，我必须根据我正在做的事情绝对定位。这可以;除了 1600px 分辨率 - 按钮超出屏幕；我想利用媒体查询来解决这个问题，但我的前两次努力都没有奏效，无法在指定的视口(viewport)移动元素，我不确定……为什么。

尝试#1:

@media screen and (min-width:1600px) { /* large resolution */ 
    #menu_tog { margin-left: 337px; }
}

尝试 # 2:

@media (max-width:1600px;) and (min-width:1300px;) { /* large resolution */ 
    #menu_tog { margin-left: 337px;}
}

原始(预计 1600 点位置变化)

#menu_tog {
    cursor: pointer;
    margin-left: 138px;
    margin-top: 230px;
    max-height: 35px;
    max-width: 50px;
    position: absolute;
    z-index: 999;
}

Answer 1

确保您使用的是 top 和 left 以及绝对定位的元素，而不是边距。从那里开始，一个简单的媒体查询就可以完成这项工作:

#menu_tog {
    position: absolute;
    cursor: pointer;
    margin: 0;
    left: 138px;
    top: 230px;
    max-height: 35px;
    max-width: 50px;
    z-index: 999;
}
@media (min-width: 1600px) {
    #menu_tog {
        left: 337px; /* adjust as necessary */
    }
}