如何調整我的博客上的社交媒體按鈕並使其響應？

Question

我需要一些幫助。我的博客模板面臨一個問題。 http://www.candidopinions.in/

我已經非常努力地使它對所有移動設備都有反應，但是當屏幕尺寸縮小到小於321像素（如iPhone 4（320 x 480））時，我面臨着社交問題媒體按鈕（就在我的博客名稱Candid Opinions下面）和底部的分頁按鈕，這兩組按鈕疊加起來，我對CSS不太熟練，但我仍然盡力解決問題，但是不能「T。

有人可以幫助我在做這些按鍵響應？

@media screen and (max-width:320px){ 
 
.post-outer {width:100%;} 
 
#search, #search-form {width:auto;} 
 
#search-form { font-size: 14px; } 
 
#breakingnews,.date-time {display:none} 
 
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;} 
 
#header-wrapper{margin:0 auto;} 
 
#wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;} 
 
#social_networks{bottom:20px;display:block;float:none;text-align:center;margin:0 auto;} 
 
#social_networks ul {display:block;text-align:center;height:30px;margin:0 auto;} 
 
#social_networks li{display:inline-block;float:none;width:30px;height:30px; 
 
opacity:0.5;background-position:left top;border:3px solid #ffffff;border-radius:50%;transition:All 0.4s ease;} 
 
#social_networks li:hover{opacity:1;background-position:left -30px;border:3px solid #e291fd;box-shadow:0 1px 3px rgba(0,0,0,0.5);} 
 

 

 
#social_networks li a{display:inline-block;width:30px;height:30px;} 
 
#social_networks li a span{display:none;} 
 

 
#blog-pager{ 
 
font-size:13px; 
 
line-height:20px; 
 
padding:2em 0; 
 
} 
 
.showpageNum a,.showpage a,.showpagePoint{ 
 
margin-top:11px; 
 
margin-bottom:16px; 
 
margin-left:4px; 
 
font-size:13px; 
 
padding:6px 10px; 
 
} 
 
} 
 
@media screen and (max-width:240px){ 
 
.post-outer {width:100%;} 
 
#search, #search-form {width:auto;} 
 
#breakingnews,.date-time,#menutop {display:none} 
 
#header,#header .description,#header h1,#header p,#header a{text-align:center;margin:0 auto;} 
 
#header-wrapper{margin:0 auto;} 
 
#wrapper,#menu,#rapih,.tab{width:100%;margin:0 auto;} 
 
#social_networks ul{bottom:20px;}}

Answer 1

社會圖標目前，它看起來好像你的社交按鈕行爲響應，流到多行的時候不再有餘地讓他們適應在視口中一行。這似乎只踢在330px以下，並且是相當標準的行爲，但是如果您想將它們全部保留在一行上，則可以使用媒體查詢來控制列表項的寬度和高度：

@media screen and (max-width: whatever) { 
    selector { 
     width: Xpx; 
     height: Xpx; 
     padding/margin: (to control vertical/horizontal spacing) 
} 

關於此問題的一些快速思考： 1.請記住，這可以使徽標非常小，難以在移動設備上點擊，因此可訪問性/可用性可能會更好，讓它們流入多行但保留他們的大小，就像他們現在所做的那樣，特別是對於設備上潛在的小型用戶組。
2.考慮去iconfonts去顯示你的Facebook，Twitter等徽標。當前使用背景圖像會使調整大小非常困難，而使用iconfonts會更簡單，並且可以實現更清晰的HTML。更多關於這裏的人：https://css-tricks.com/html-for-icon-font-usage/

分頁單元對我而言，在Chrome上，這些頁面在移動寬度上溢出。也許切換到li標籤的相同用法，而不是每個頁碼的跨度 - 這會給你更清潔，語義正確的代碼，然後你可以應用display：inline-block來允許它們響應行爲。從那裏可以得到與上面相同的提示。