Question

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

这是我定位的主要原因：

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

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

有人能指出我正确的方向吗？ THX。

Answer 1

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

这是我的帮助......

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

Answer 2

我解决了这个问题。我曾尝试对我认为最大的视口大小进行媒体查询。事实证明，我写的是错误的宽度（只是＆＃34;勉强＆＃34;错误，但你知道这意味着-g）。用于定位的媒体查询应设置为最小宽度1140像素。我把它设置为1122像素。很近。 LOL

媒体查询无法使用较大的视口大小

2 个答案: