Question

我在JS的网站上做响应。如何更改（正常分辨率）：

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

当媒体宽度小于＆lt; 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%。谢谢:)）

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

JS＆＃34; @ media＆＃34;设备分辨率更改js命令的属性

1 个答案: