响应的行图标

Question

我是HTML和CCS的新手，我正在尝试创建一个小型的个人网站。我在Sketch中设计了一个设计，并且我成功地在HTML和CSS上重现了它。我在底部有三个大图标，可以将您发送到不同的页面（Twitter，Instagram和Tumblr）。在大屏幕上，该网站看起来很棒。但是，当它在小屏幕上加载时，它看起来很糟糕。我希望这三个图标将每个图标叠加在另一个上面。这是现在的样子：

我想要的是每个图标都在另一个图标之上，因此它将是Twitter，在Instagram之下，以及Tumblr。我尝试了很多东西，比如设置专栏，我在互联网上看了很多教程，但我还没有真正找到解决方案。

谢谢！

编辑：代码部分 HTML

<div class="social-container">
<div class="twitter">
  <a href="http://twitter.com/jmml97" target="_blank"><img src="images/Twitter Logo.png" alt="Twitter"/></a>
</div>
<div class="instagram">
  <a href="http://instagram.com/jmml97" target="_blank"><img src="images/Instagram Logo.png" alt="Instagram"/></a>
</div>
<div class="tumblr">
  <a href="http://jmml97.tumblr.com" target="_blank"><img src="images/Tumblr Logo.png" alt="Tumblr"/></a>
</div>

CSS

.social-container {
  margin-top: 100px;
  display: block;


  width: 60%; 
  margin: 8px auto; padding: 16px;
  text-align: center;

  -webkit-columns: 3 33%;
  -moz-columns: 3 33%;
  columns: 3 33%;
}

@media (max-width: 768px) {

  .social-container {
    -moz-columns:    1 100%;
    -webkit-columns: 1 100%;
    columns:         1 100%;
    display: inline;
    margin: 8px auto;
}

Answer 1

您可以使用media查询执行此操作。只需为较小的屏幕定义样式即可。通常，手机大小屏幕的大小被认为是768px。

例如，如果您使用img作为图标，那么您只需为较小的屏幕更改display：

演示小提琴：http://jsfiddle.net/abhitalks/rvjmk90e/

演示代码段 ：

div.jumbo {
    background-color: #eee;
    width: 60%; 
    margin: 8px auto; padding: 16px;
    text-align: center;
}

@media (max-width: 768px) { 
    img {
        display: block;
        margin: 8px auto;
    }
}

<div class="jumbo">
    <h2>Hola</h2>
    <img src="http://placehold.it/120x120/&text=tw" />
    <img src="http://placehold.it/120x120/&text=Ig" />
    <img src="http://placehold.it/120x120/&text=tm" />
</div>

Answer 2

响应式网络的更好方法是不使用<img />，而是插入图片作为背景background-image。

media query设置width: 100%，一切都会好的。如果他们 100％，就把自己放在一起。