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

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设置为#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; } } 选择器上的负值，导致问题。

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

RunScript

还请格式化代码！

祝你好运！ ：）