响应式社交按钮

Question

我的网页顶部连续有 4 个社交按钮。

HTML Code
    <div id="social-buttons">
      <span id="facebook-like">
        <!-- FACEBOOK LIKE - START -->
          <div class="fb-like" data-href="http://www.facebook.com/romancestuck" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" ref="like_button"></div>
        <!-- FACEBOOK LIKE - END -->
      </span>
      <span id="twitter">
        <!-- TWITTER FOLLOW - START -->
          <a href="https://twitter.com/RomanceStuck" class="twitter-follow-button" data-show-count="true" data-width="150px" data-show-screen-name="false">Follow </a>
          <script>
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
          </script>
        <!-- TWITTER FOLLOW - END -->
      </span>
      <span id="pinterest">
        <!-- PINTEREST.COM - START -->
          <a data-pin-do="buttonFollow" href="http://www.pinterest.com/romancestuck/">RomanceStuck.com</a>
        <!-- PINTEREST.COM - END -->
      </span>
      <span id="google-plus">
        <!-- PLUS.GOOGLE.COM BADGE - START -->
          <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/106310759116433212593" data-rel="publisher"></div>
        <!-- PLUS.GOOGLE.COM BADGE - END -->
        <!-- PLUS.GOOGLE.COM WIDGET ASYNCHRONOUS JAVASCRIPT LOADER (PLACE THIS TAG AFTER THE LAST GOOGLE PLUS WIDGET) - START -->
          <script>
            (function(){
              var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
              po.src = 'https://apis.google.com/js/plusone.js';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
          </script>
        <!-- PLUS.GOOGLE.COM WIDGET ASYNCHRONOUS JAVASCRIPT LOADER (PLACE THIS TAG AFTER THE LAST GOOGLE PLUS WIDGET) - END -->
      </span>
    </div>

CSS Code
  */* CSS CODE FOR ALL DEVICES - START */
      #social-buttons
      {
        clear:both;
      }
      #social-buttons > span > *
      {
        vertical-align:middle !important;
      }  
      #facebook-like
      {
        padding:0 13px 0 0;
      }
      #twitter
      {
      }
      #pinterest
      {
        padding:0 17px 0 0;
      }
      #google-plus
      {
      }
  /* CSS CODE FOR ALL DEVICES - END */

  /* CSS CODE ONLY FOR MOBILE DEVICES - START */
    @media screen and (max-width:727px)
    {
        #google-plus
        {
          display:none;
        }
        #twitter
        {
          display:none;
        }
    }
  /* CSS CODE ONLY FOR MOBILE DEVICES - END */*

现在我在移动设备上隐藏了 Google Plus 和 Twitter 社交按钮，因为它们不会在较小的屏幕上直接换行，而是会弄乱页面的宽度。如何让这些社交按钮在移动设备上正确换行并占用 2 行？

谢谢！

Answer 1

您可以拥有 3 或 2 组不同的样式（或者当然只有一种样式！），例如将样式包含在 @media only screen and (min-width: XXXpx) { 和 } 中：

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) { 
a { 
   color:#0F0;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
a { 
   color:#00F;
}
}