Question

我遇到的情况是，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（）。

之前有人在与类似的东西挣扎吗？

Answer 1

样式表级联，所以首先 - 确保样式表调用中的某个地方的红色没有红色。如果它仍然不起作用 - 你应该真的避免这些，但是添加一个重要的青色可能会使它变得有效。

Answer 2

320px应该是最小宽度。什么设备小于320px？您的媒体查询应从320开始。尝试以下内容：媒体屏幕和（最小宽度：320px）和（最大宽度：767px）{。headingwrapper-left h5 {color：red; }}

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

2 个答案: