用 Css MediaQueries 覆盖 JQuery css 值

Question

我正在使用 css 媒体查询构建一种响应式 Web 布局。我刚开始将一些带有 jQuery 和运行的动画包含在以下问题中：

当使用 jQuery 对元素进行动画处理时，每个元素都会在其 style="..." 属性中接收动画值。这意味着它们的原始值（可能已存储在 class 中）将被忽略。我有一个针对 print 并重置动画值以提供更好的纸上视觉体验的媒体查询。问题是，媒体查询中的更改不会影响元素，因为它们现在有自己的样式属性，比 class 设置更强。

@media print{
    .PaddOnScroll{
        padding-left: 1.6em;
        opacity: 1;
    }
}

<div class="ContentBounds TitleFont PaddOnScroll" style="padding-left: 0px; opacity: 0;">
    ...
</div>

您知道如何强制应用我的媒体查询吗？

Answer 1

通过 css 覆盖内联规则的唯一方法是使用 !important.

@media print{
    .PaddOnScroll{
        padding-left: 1.6em !important;
        opacity: 1 !important;
    }
}

另一个只使用 jquery 的解决方案是 count screen size and apply rule with .css().

用 Css MediaQueries 覆盖 JQuery css 值

Overwrite JQuery css values with Css MediaQueries

html

css

jquery

media-queries