Javascript 如何更改css位置、宽度、持续时间和动态延迟？

我使用CSS3来控制我的转换，我已经使我的#包装宽度达到100%。但是，当我在整个宽度上为div设置动画时，它无法正常工作。 1.如果浏览器的“宽度”为“最大值”，则动画鸟将复制。 2.如果将浏览器的宽度调整为更小的尺寸，动画鸟将不会在屏幕上移动。 3.云和鸟也会时不时地重置或闪烁

这个。我想通过将这些值设置为动态，它可能会解决上述问题。但是，我不知道如何根据浏览器窗口的大小动态设置这些值。如果我将#wrapper设置为固定宽度，并将所有过渡和动画设置为固定宽度，则效果良好

---

非常感谢您的帮助。

您能提供一些实用的代码吗？如果您与代码共享一个JSFIDLE链接会更好。您可能需要使用媒体查询根据视口大小给出CSS值。。或者你也可以选择一些响应性强的框架。谢谢！我对媒体查询很熟悉，但你能给我介绍一下关于响应框架的解释吗？