1

假设有一个div元素，我们在760px宽度上。当前margin-top作为css属性值将是60px.

CSS：

@media only screen and (min-width: 360px) {
    div.me {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 760px) {
    div.me {
        margin-top: 60px;
    }
}

然后我改变margin-topbyjquery做更多的事情。例如80px。

jQuery

$("div.me").css("margin-top", "80px");

我正在寻找解决方案：当用户调整窗口大小时，是否将元素重置margin-top为第一个documnet ready值取决于它的媒体查询。

假设用户调整了400px宽度。所以元素应该被重置为margin-top: 30px.

我想为所有元素设置自定义属性以在其中保存第一个值。

$(document).ready(function () { 
    var m = $("div.me").css("margin-top");
    $("div.me").attr("first-margin-top", m);
});

$(window).resize(function () {
    // some stuff to retrieve first value, not important...
});

但是页面上有很多这样的元素，每个元素都有很多媒体查询值。这里我只讲了一个元素。

有没有更好的方法来检索和重置元素？任何想法？

4

2 回答 2

0

您将 CSS 值设置为内联，因此它胜过您的媒体查询。要么使用 jquery 执行此操作，要么将 !important 标签添加到您的 css 中：

@media only screen and (min-width: 760px) {
    div.me {
        margin-top: 60px !important;
    }
}

$(window).resize(function () {
    if($(window).width < 760){
      $("div.me").css("margin-top", "60px");
    }
});
于 2013-09-08T16:58:09.940 回答
0

最后我找到了我自己问题的答案。我只是将内联样式更改为""或删除它。它使浏览器再次margin-top根据media query值设置或其他属性（如果需要）。

$(window).resize(function () {
    $("div.me").css("margin-top", "");
    //or
    $("div.me").removeAttr("style");
});

提琴手

于 2013-09-08T17:51:41.740 回答