JS" @ media"设备分辨率更改js命令的属性

时间:2016-02-06 16:42:20

标签: javascript jquery html css responsive-design

我在JS的网站上做响应。如何更改(正常分辨率):

$(".card1_content_arrow").click(function () {
    $(".card1_content").css('margin-left', '-45%');
});

当媒体宽度小于< 860px时(在css @media all和(max-width:860px)中):

$(".card1_content_arrow").click(function () {
    $(".card1_content").css('margin-left', '-100%');
});

当我在大分辨率上点击.card1_content_arrow时,margin-left将更改为-45%',但如果我将分辨率更改为860px(及更低),我希望我点击相同的.card1_content_arrow,然后margin-left将更改为-100%。 谢谢:))

1 个答案:

答案 0 :(得分:1)

您可以按照question

中的说明检测屏幕分辨率
$(".card1_content_arrow").click(function () {
    var margin = "-45%";

    if (window.screen.availWidth < 860) {
        margin = "-100%";
    }

    $(".card1_content").css('margin-left', margin);
}); 

我建议使用media queries来指定另一个类来控制边距。

.yourClass {
    margin-left: -45%;
}

@media (max-width: 859px) {
    .yourClass {
        margin-left: -100%;
    }
}

您只需将该类添加到元素中,然后让浏览器进行检查。

$(".card1_content_arrow").click(function () {
    $(".card1_content").addClass('yourClass');
});