使用Css MediaQueries覆盖JQuery css值 [英] Overwrite JQuery css values with Css MediaQueries

问题描述

我正在使用CSS媒体查询构建一种响应式网页布局。
我刚刚开始使用jQuery包含一些动画，遇到以下问题：

I am building a sort-of responsive web layout using css media queries. I just started including some animations with jQuery and ran into the following problem:

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

When animating elements with jQuery, each element receives the animated values in their style="..." property. That means their original values, which may have been stored in a class, are ignored. I have a media query which targets print and resets the animated values to provide a better visual experience on paper. The issue is, that the changes in the media queries do not affect the element, since they now have their own style property which is stronger than the class settings.

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

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

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

Do you have an idea of how I can force my media queries to be applied?

推荐答案

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

The only way to override an inline rule via css is using !important.

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

另一个只使用jquery的解决方案是 count screen size and apply rule with 。css（）。

Another solution using jquery only is to count screen size and apply rule with .css().

这篇关于使用Css MediaQueries覆盖JQuery css值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！