響應式社交按鈕

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 */* 

現在我隱藏在移動設備上的谷歌加和Twitter社交按鈕，因爲他們不正確的較小的屏幕，而是陷入困境的頁面寬度上包裹。我如何才能讓這些社交按鈕正確換行並在移動設備上佔用兩行？

謝謝！

Answer 1

您可以通過包裝在@media only screen and (min-width: XXXpx) {你的風格和ofcourse一個}例如有3個或2個不同勢的一套樣式（或一種風格只ofcourse！）：

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