如何使用 jQuery 调用媒体查询答案

【问题标题】：How to call media query using jQuery如何使用 jQuery 调用媒体查询
【发布时间】：2021-11-23 06:48:34
【问题描述】：

我正在尝试通过document.ready 方法调用媒体查询。在这里，我的目标是在加载 HTML 内容后调用媒体查询。任何人都可以帮忙吗？关于这一点。

例子：

@media only screen and (min-width: 1200px){
  .main_container {
    width: 1200px;
  }
}

【问题讨论】：

这不是 jQuery，它是 CSS 代码。尝试发布您当前的 HTML 代码，我们或许可以为您提供帮助。此外，其余相关的 CSS。
这能回答你的问题吗？ Is there a javascript equivalent to using @media query?
@FabianS。我认为 Nani 相当困惑，并且正在尝试使用媒体查询来应用响应式样式。

标签： javascript jquery css

【解决方案1】：

你可以使用

$windowWidth = $(window).width();

这将为您提供当前屏幕的大小。然后使用条件添加你的css

    if ($windowWidth >= 1200) {
        $('.main_container').css('width', '1200px');
    } else {
        $('.main_container').css('width', 'auto');
    }

【讨论】：

它工作正常。我还有一个疑问如果宽度 >= 1200 我正在使用上面的代码，但如果宽度小于 1200 它不会删除应用的 CSS。
@Nani 我已经更新了答案，对较低的屏幕使用 else 条件
我已经在 CSS 文件中提到 main_container 的宽度默认为 1000px。应用您的代码后，它对我的工作正常 >= 1200px。但是当屏幕尺寸减小时，它不会应用默认的类名样式。
@Nani 这仅在您刷新页面后才有效， $(window).width() 将占用您当前屏幕的宽度。如果您通过拖动检查元素中的响应来调整屏幕尺寸，我认为它不会正确显示。如果您想这样做，则需要添加一些计算以根据更改屏幕宽度来减小 div 大小。