在我的设计中,我将Like按钮移动到小屏幕尺寸的页脚。在Chrome中,通过多次调用窗口小部件可以实现花花公子。在其他浏览器中,可见的Like按钮正确隐藏,但另一个不会在调整大小时加载。
http://jsfiddle.net/isherwood/kc3r2
@media (max-width: 400px) {
#header .fb-like {display: none;}
#footer .fb-like {display: block;}
}
<div id="header">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
答案 0 :(得分:1)
尝试使用visiblity
代替display
:
#footer .fb-like { visibility:hidden; }
@media (max-width: 400px) {
#header .fb-like { visibility:hidden; }
#footer .fb-like { visibility:visible; }
}