为什么此网页上的内容溢出 - 需要css帮助

Question

我有一个博客，在移动设备上观看的某些帖子中，内容溢出了可见屏幕。我是下面的例子，这部分是由于YouTube嵌入式视频比屏幕宽，但是通过正确的css调整，我们应该能够强制内容适应屏幕。

请帮忙！

https://www.kalimukti.com/blog/sun-salutation-sequence-should-you-use-up-dog-or-cobra

Answer 1

添加此CSS规则（在媒体查询中）应解决该问题：

@media screen and (max-width: 480px) {
  iframe {
    width: 100%;
  }
}

它将嵌入的视频保持在屏幕宽度内，其他所有内容都相应地跟随。

或者您可以使用max-width: 100%代替width，这样会更灵活。