Question

我需要一些帮助。我的博客模板面临问题。 http://www.candidopinions.in/

我已经非常努力地使其对所有移动设备做出响应，但是当屏幕尺寸缩小到任何小于321像素时（如iPhone 4（320 x 480）），我面临着社交媒体按钮的问题（在我的博客名称Candid Opinions下方）标题中以及底部的分页按钮。这两组按钮堆叠起来。我不是很熟悉CSS但我仍然尽力解决问题但是不能。

有人可以帮助我让这些按钮响应吗？

＆＃13;

@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;}}

＆＃13;

Answer 1

社交图标目前，看起来社交按钮的行为响应性很强，当它们不再适合视口中的一行时，会流向多行。这似乎只是在330px以下，并且是相当标准的行为，但是如果你想将它们全部放在一行上，那么你可以使用媒体查询来控制列表项的宽度和高度：

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

对此有一些快速的想法： 1.请记住，这可能会使徽标非常小并且难以在移动设备上点击，因此可访问性/可用性可能更好，只需让它们流到多行但保留其大小，就像现在一样，特别是设备上的潜在v小组用户＆lt; 330px 2.考虑使用iconfonts来显示你的Facebook，Twitter等徽标。正如您目前所做的那样使用背景图像使得调整大小非常困难，而使用iconfonts则更简单并且允许更清晰的HTML。更多关于这些：https://css-tricks.com/html-for-icon-font-usage/

分页单元对我来说，在Chrome上，这些内容在移动宽度上溢出页面。也许切换到li标签的相同用法而不是每个页码的跨度 - 这将为您提供更清晰，语义正确的代码，然后您可以只应用display：inline-block以允许它们响应行为。与上述相同的提示适用于此。

如何在我的博客上调整大小并使我的社交媒体按钮响应？

1 个答案: