如何使 Facebook 评论具有 100% 的流体宽度？

Question

http://developers.facebook.com/docs/reference/plugins/comments/

这是我在页面上包含 Facebook javascript SDK 后生成 cmets 区域的方式：

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

如您所见，facebook 根据您提供的数据属性设置 cmets 区域的宽度：

data-width="600"

在这种情况下，我告诉 facebook 我希望该区域为 600 像素。但我目前正在构建一个响应式站点，并且需要 cmets 部分以 100% 适应屏幕的宽度。不做这些工作：

data-width="100"
data-width="100%" 

有什么方法可以让 facebook cmets 获得流动的宽度？

Answer 1

试试这个代码：

<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>

Answer 2

第一个尺寸适用于小于 1200 像素和大于 979 像素的设备。唯一的问题是 IE 有时，但你可以使用类似的东西：width: 1200px\9; - IE 8 及更高版本

这个示例来自bootstrap，我经常使用它。要使用它，您需要更少的win version。但是这段代码可以在浏览器中运行（旧的 IE 除外）。

.fb-comments { width: 490px; /* or width: 50%; */ }

/* Large desktop */
@media (min-width: 1200px) {
    .fb-comments { width: 600px; /* or width: 50%; */ }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .fb-comments { width: 400px; /* or width: 50%; */ }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .fb-comments { width: 30px; /* or width: 50%; */ }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .fb-comments { width: 200px; /* or width: 50%; */ }
}

也尝试使用百分比，而不是像素，即使有填充，例如：

.fb-comments { width: 90%; height: auto; padding: 0 5%; }