媒体查询不适用于更大的视口大小

Question

我的侧边栏顶部有一组社交媒体图标：outtacontext。但是我无法将它们定位在不同视口大小的正确位置。实际上，它适用于所有较小的视口，但对于较大的屏幕，定位是关闭的。

这是我这个定位的主要 css：

#top #sidebar_bg .social_bookmarks {
position: absolute;
right: 69px;
z-index: 152;
margin-top: 102px;
}

@media only screen and (max-width: 989px) and (min-width: 768px){

#top #sidebar_bg .social_bookmarks {
right: 33px;
margin-top: 65px;
}
}

出于某种原因，对于较大的屏幕，图标似乎会在侧边栏中居中。但是我进行调整的任何媒体查询都会开始增加问题。

谁能指出我正确的方向？谢谢。

Answer 1

我解决了这个问题。我曾尝试对我认为最大的视口大小进行媒体查询。事实证明，我用错误的宽度写了它（只是“几乎”错了，但你知道 -g 是什么意思）。用于定位的媒体查询应设置为 1140 像素的最小宽度。我已将其设置为 1122 像素。很近。哈哈

Answer 2

首先，我是阿根廷人，所以请原谅我的英语！

这是我的帮助...

HTML 标记为：

<div id="sidebar_bg">

    <ul class="social_bookmarks">

        <li class='twitter'>
            <a href='http://twitter.com/outtacontext'>Follow us on Twitter</a>
        </li>
        <li class='facebook'>
            <a href='http://facebook.com/chamomileteaparty'>Join our Facebook Group</a>
        </li>
        <li class='gplus'>
            <a href='https://plus.google.com/106461359737856957875/posts'>Join me on Google Plus</a>
        </li>
        <li class='linkedin'>
            <a href='http://linkedin.com/jeffgates'>Add me on Linkedin</a>
        </li>
        <li class="rss">
            <a href="http://www.outtacontext.com/wp2/feed/">RSS</a>
        </li>
        <li class="flickr">
            <a href="http://flickr.com/outtacontext">Flickr</a>
        </li>

    </ul>

</div>

CSS 样式：

#top #sidebar_bg {
    text-align: center; /* This will center EXACTLY on the middle the icons (acording to the #sidebar_bg width on every screen resolution */
}

#top #sidebar_bg .social_bookmarks {
    display: inline-block;
    z-index: 152;
    margin-top: 102px;
}

@media only screen and (max-width: 989px) and (min-width: 768px){
    #top #sidebar_bg .social_bookmarks {
        margin-top: 65px;
    }
}

ALTERNATIVE CSS - 如果你想把它放在右边或左边，并使用媒体查询来确定从一侧的分隔宽度，你可以使用这个：

#top #sidebar_bg {
    text-align: *****; /* right or left */
}

#top #sidebar_bg .social_bookmarks {
    margin-*****: 40px; /* right or left */
    display: inline-block;
    z-index: 152;
    margin-top: 102px;
}

@media only screen and (max-width: 989px) and (min-width: 768px){
    #top #sidebar_bg .social_bookmarks {
        margin-*****: 25px; /* right or left */
        margin-top: 65px;
    }
}