我在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%
。
谢谢:))
答案 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');
});