动态调整 Facebook Like Box 的大小 - data-width="{n}" 的响应式变化答案

【问题标题】：Dynamically resize Facebook Like Box - responsive change of data-width="{n}"动态调整 Facebook Like Box 的大小 - data-width="{n}" 的响应式变化
【发布时间】：2013-12-30 16:20:27
【问题描述】：

Facebook 代码：

<div class="fb-like-box" data-href="http://stackoverflow.com/" data-width="160" data-height="100" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>

我正在尝试在屏幕尺寸更改时动态更改 data-width="{n}" 和/或 data-height="{n}"（智能手机/tablet 方向更改）使用 javascript 或 CSS 媒体查询。

【问题讨论】：

标签： javascript css responsive-design dynamically-generated

【解决方案1】：

尝试将此添加到您的 css 代码中：

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width:  100% !important;display:block;z-index:2000;position:relative}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:relative}

希望对你有帮助..

【讨论】：

该方案效果很好，不需要js。很好的解决方案，谢谢！我看到您正在覆盖 fb-like-box 和内部跨度的默认宽度。在我的案例中包含 fb-cmets 类有什么特殊原因，或者只是使解决方案更通用？
很高兴为您提供帮助。这是所有 fb 社交插件的通用解决方案。
很棒的代码，你能推荐一些类似的解决方案来设置动态高度吗？因为通过使用您的 css，like 框在底部被剪掉了一些。
嘿@SaumilSoni，你能分享一个链接吗？
大声笑，不用担心@ManishShrivastava