设置全屏高度的jQuery sizeContent是否会干扰CSS媒体查询？

首先咱们来拆解下你遇到的问题：你的jQuery代码原本能让页面保持全屏高度，但当通过媒体查询修改字体大小时，它却干扰了CSS的布局计算。这大概率是代码里的几个小问题，以及JS和CSS在布局控制上的冲突导致的。

问题根源分析 #

• 选择器错误：你代码里的$("wrapper")是无效选择器——如果wrapper是ID，得写成$("#wrapper")；如果是类名，要写成$(".wrapper")。原生HTML里没有<wrapper>标签，之前可能偶然生效，但这会导致后续布局计算出问题。
• 高度计算逻辑偏差：你用$("html").height()来设置min-height，但这个值是html元素的内容高度，不是视口的全屏高度。当媒体查询改变字体大小、内容高度变化时，只有窗口resize事件会触发重新计算，字体变化本身不会触发resize，所以wrapper的高度不会及时更新，进而干扰CSS布局。
• JS与CSS布局控制权冲突：JS动态设置的min-height会覆盖CSS的计算，尤其是当媒体查询试图调整布局时，JS的硬编码高度会限制CSS的发挥。

解决方案 #

方案1：用纯CSS实现全屏高度（推荐）

其实完全可以不用jQuery，用CSS的视口单位vh就能轻松实现全屏高度，从根源上避免JS和CSS的冲突：

#wrapper { /* 换成你的实际选择器 */
    min-height: 100vh;
}

100vh表示视口高度的100%，不管字体怎么变、窗口怎么resize，浏览器都会自动处理高度，完美适配媒体查询。

方案2：修正jQuery代码（如果必须用JS）

如果你因为某些原因必须保留jQuery实现，可以这样修改：

$(document).ready(function () {
    'use strict';
    sizeContent();
    $(window).resize(sizeContent);
    // 额外监听字体变化导致的布局重排（可选）
    const observer = new MutationObserver(sizeContent);
    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['style']
    });
});

function sizeContent() {
    'use strict';
    // 用视口高度代替html元素高度
    const newHeight = $(window).height() + "px";
    // 修正选择器，这里假设是ID选择器，根据实际情况调整
    $("#wrapper").css("min-height", newHeight);
}

• 修正了选择器，确保能正确选中wrapper元素；
• 改用$(window).height()获取视口高度，保证全屏效果；
• 添加了MutationObserver来监听html元素的样式变化（比如字体大小修改），一旦变化就重新计算高度，确保和媒体查询同步。

额外提示 #

尽量优先用CSS处理布局相关需求，CSS是浏览器原生支持的，性能更好，也不容易和其他样式规则冲突。只有当CSS无法实现复杂动态逻辑时，再考虑用JS辅助。

内容的提问来源于stack exchange，提问作者Lisa-Andrea Glatz