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

Question

我正在用 JS 在我的网站上做响应。我怎样才能改变这个(正常分辨率):

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

当媒体宽度为 <860px 时(在 css @media all and (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% 。谢谢:)

Answer 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');
});