html - 社交媒体图标不显示在手机上

Question

我在页脚上制作社交媒体图标，当我在 PC 上时它显示正常，但当我在移动设备上时它消失了。这是我的代码

<footer class="container-fluid">
<p>Copyright 2016</p>
<ul id="socialmedia">
    <li><a href="http://facebook.com" target="_blank"><i class="fa fa-facebook fa-fw"></i></a></li>
    <li><a href="http://twitter.com" target="_blank"><i class="fa fa-twitter fa-fw"></i></a></li>
    <li><a href="http://instagram.com" target="_blank"><i class="fa fa-instagram fa-fw"></i></a></li>
    <li><a href="http://youtube.com" target="_blank"><i class="fa fa-youtube fa-fw"></i></a></li>
</ul>

这是CSS

#socialmedia {
margin:0 auto;
display:block;
width:22%;
height:50px;
padding:0;
position:relative;
top:-45px;
left:-540px;
background:#0C5060;
}
#socialmedia li {
display:block;
float:left;
width:calc(25% - 1px);
text-align:center;
}
#socialmedia a {
display:block;
padding:5px 0;
font-size:24px;
color:#F8F8F8;
}
#socialmedia a:hover {
background-color:#fff;
color:#166D81;
}
.socialmedia-mobile a {
display:block;
width:25%;
float:left;
text-align:center;
}

下面是页脚在 PC 上的外观截图 以及它在手机上的样子

Answer 1

您有一个 position: relative;，其中 top 和 left 在 #socialmedia 选择器上设置为负值这是导致问题的原因。

尝试使用@media 查询在不同的屏幕尺寸上对元素进行不同的样式设置，例如:

#socialmedia {
    margin:0 auto;
    display:block;
    width:22%;
    height:50px;
    padding:0;
    background:#0C5060;
}

#socialmedia > li {
    display:block;
    width:25%;
    float:left;
    text-align:center;
}

@media (min-width: 768px) {
    #socialmedia {
        position:relative;
        top:-45px;
        left:-540px;
    }
}

@media (max-width: 767px) {
    #socialmedia > li {
        display:block;
        width:25%;
        float:left;
        text-align:center;
    }
}

另外，请格式化您的代码!

祝你好运! :)