js命令的JS“@media”设备分辨率更改属性答案

【问题标题】：JS "@media" device resolution change property of js commandjs命令的JS“@media”设备分辨率更改属性
【发布时间】：2016-02-07 01:09:58
【问题描述】：

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

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

到这里，当媒体宽度为

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

当我在大分辨率上单击.card1_content_arrow 时，margin-left 将更改为-45%'，但如果我将分辨率更改为 860 像素（或更小）我想要，当我单击相同的@987654326 时@，然后margin-left 将更改为-100%。谢谢:)

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案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');
});

【讨论】：

谢谢！ :) 我做了第一个选项，但我可以看到“css”选项也可以！祝你有美好的一天！