响应式 Twitter 嵌入答案

【问题标题】：Responsive Twitter embeds响应式 Twitter 嵌入
【发布时间】：2014-07-08 09:08:47
【问题描述】：

之前我可以使用下面的代码使 Twitter 嵌入响应：

            iframe[id^='twitter-widget-'] { width: 100% }

但是，这不再有效。我尝试了不同的东西，但没有一个会奏效。有人对此有更新的解决方法吗？

你可以在这里看到它的工作：http://musik.dk/samsmith/

【问题讨论】：

标签： css html twitter

【解决方案1】：

 #twitter-widget-1 {
      width:100%;
 }

但是，小部件所在的容器具有最小宽度，因此它会与该容器对齐。

 <section class="mcl mr350">

【讨论】：

那个不再起作用了。我已经插入了它，包括一个 !important，但它不起作用。
奇怪。我现在让它工作了。似乎这是一个缓存问题。谢谢！

【解决方案2】：

以下 CSS 应该可以工作：

.twitter-tweet {
width: 100% !important;
}

【讨论】：

【解决方案3】：

<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" title="Twitter Timeline" height="600" style="border: none; max-width: 100%; min-width: 180px; width: 520px;"></iframe>

见width: 520px;

【讨论】：

你登录 twitter 并更改了 520px 的宽度吗？据我所见，限制框的唯一值是 iframe 中的宽度...
不，我没有改变它，但我需要一个灵活的（百分比）宽度，否则它不会响应。
需要去掉宽度：520px；或将其更改为 100% 或其他任何内容。登录到 twitter dev 进行更改。

【解决方案4】：

我采用了一种略有不同的方法，在测试时似乎效果很好。为确保推文具有响应性（假设您使用的是标准推文嵌入代码），如果您想要一种可靠的方法来解决问题，我建议您将其添加到您的 CSS 文件中：

.twitter-tweet {
width: 100%;
padding: 20px;
}

如果它很挑剔，填充特别有用，有助于清理东西。

【讨论】：