当浏览器窗口宽度改变时添加样式答案

【问题标题】：Add style when when browser window width change当浏览器窗口宽度改变时添加样式
【发布时间】：2015-10-16 03:26:37
【问题描述】：

我正在开发响应式 wordpress 主题，我一直在创建一个脚本，用于检测 #header 高度并将样式添加到 .main_wrapper 的填充。

jQuery(document).ready(function() {
var header_height = jQuery("#header").height();
main_wrapper = jQuery(".main_wrapper");
main_wrapper.css('padding-top', header_height);
));

但问题是当我打开我的网站时。它添加了一个填充，但是当我调整浏览器的大小时，它并没有改变 .main_wrapper 填充

【问题讨论】：

您没有共享足够的代码让我们帮助您...
您没有window.resize 处理程序，因此您的代码仅在页面加载时运行一次，除非您告诉它，否则它不会在调整窗口大小时运行。这听起来确实像你应该尝试找到一个 CSS 解决方案。
媒体查询会让你受益匪浅：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
谢谢大家。我弄错了。做到了。 :)

标签： jquery html css wordpress

【解决方案1】：

https://jsfiddle.net/94xw513j/1/

$(window).resize(function() {  
var header_height = jQuery("#header").height();
main_wrapper = jQuery(".main_wrapper");
main_wrapper.css('padding-top', header_height);
})

【讨论】：