javascript - 动态 JQuery 调整大小

Question

我正在使用一个响应式设计网站，更具体地说是一个包含多个 Div 的页面。当您重新调整网页大小时，div 的宽度会随着它们设置为百分比而变化。由于高度必须保持不变，除非 div 会消失，否则我必须设置断点来更改高度。如果我不改变高度，它会保持不变并在下面的 div 之间添加“边距”。本质上，我的逻辑是：当窗口重新调整大小并且宽度小于 810px 时，然后删除所有 CSS 样式，并添加边距顶部，项目 2 到无穷大。由于这很难通过写作来解释，所以我在最后添加了以下代码。

当我重新调整浏览器窗口的大小并且内容 div 小于 810px 时，样式不会被删除。查看我的代码，罪魁祸首可能是什么？

该函数位于第 27-50 行：https ://github.com/jdmagic21/coded_container/blob/master/work.js

Answer 1

您应该考虑使用 CSS 媒体查询来根据浏览器的宽度更改样式，而不是使用 Javascript。

这是一个教程 - Google 上的热门文章之一“如何使用 CSS 媒体查询”

这是媒体查询的浏览器兼容性表。只要不要太在意IE8或之前的版本就可以！

Answer 2

您可以使用 CSS 媒体查询来做到这一点。

@media screen and (max-width: 810px) {
     /* reset the styles of the divs here */
}