Jquery 与 CSS 媒体查询的兼容性问题？答案

【问题标题】：Compatibility issues of Jquery with CSS media queries?Jquery 与 CSS 媒体查询的兼容性问题？
【发布时间】：2018-07-06 06:23:30
【问题描述】：

我遇到了 CSS 媒体查询的实例，例如较小的设备（智能手机），在我的页面上运行良好以设置初始页面元素的样式，但随后不一致地应用于我稍后插入页面的元素jQuery 方法。在对此进行了很多测试之后——寻找我是否在覆盖 CSS 类或类似的东西上犯了错误——我找不到解决方案，这促使我想知道问题是否出在 Jquery 本身，可能是因为一些 Jquery 方法是与其他 CSS 媒体查询不兼容？？？

以下是页面中按预期设置样式的一些 html：

<div class="headingwrapper top-center">
    <h1 class="bigheading">Site Title</h1>
    <h4 class="tagline">My cool tagline</h4>
</div>

点击“开始游览”按钮后，这些功能会运行，其中包括：

$('#newbgimage').fadeIn(2000);
$(".headingwrapper").html('<h2 class="tourtext-white">We\'re beginning the tour...</h2>').fadeIn(500);

来自媒体查询样式表：

@media screen and (max-width: 320px) {  .tourtext-white {font-size: 1.8rem;} }

来自主样式表：.tourtext-white { font-size: 4.3rem; }

在智能手机上，浏览器接受媒体查询并呈现较小的字体。

然而，在我的游览后期，我使用 Jquery 插入的 html 元素并不总是根据应用于它们的 CSS 媒体查询呈现。例如：

$("body").append('<div class="headingwrapper-left"><h5>A new tour page heading</h5></div>');

主样式表：

.headingwrapper-left h5 { color: teal; };

媒体查询样式表：

@media screen and (max-width: 320px) { .headingwrapper-left h5 { color: red; }}

这种尺寸的智能手机中的文字仍然显示为蓝绿色，而不是预期的红色。如果我使用 .after() 或 .before() 方法添加我的新 html 而不是 $('body').append() 方法，情况仍然如此。

以前有人遇到过类似的事情吗？

【问题讨论】：

旁注，您应该将引用从We're beginning the tour 转义为We\'re beginning the tour。

标签： jquery css media-queries

【解决方案1】：

样式表级联，所以首先 - 确保红色不是从您的样式表调用中的某处的蓝绿色中下来。如果它仍然不起作用 - 你真的应该避免这些，但是在蓝绿色中添加一个 !important 可能会使其正常工作。

【讨论】：

好主意，但这并没有解决问题。样式表级联没问题，先全局样式，再媒体查询，忽略!important。

【解决方案2】：

320px 应该是最小宽度。什么设备的像素小于 320 像素？您的媒体查询应从 320 开始。尝试以下操作：媒体屏幕和 (min-width: 320px) and (max-width: 767px) { .headingwrapper-left h5 { color: red; }}

【讨论】：