使用javascript媒体查询应用样式

Question

我试图根据屏幕宽度为'.copy'设置不同的'margin-top'值。 认为它需要使用JS变量进行设置，但需要打开才能听到最佳解决方案。

悬停蓝色块以查看js效果

现有示例：

JS小提琴

JS

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':'80px'});
}, function () { //Frame 3
    $('.copy').animate({'margin-top':'140px'});
});

理想情况下，我想为屏幕宽度设置一个margin-top，> 768px，> 1024px，+ 1281px

Answer 1

您可以使用CSS使用媒体查询和转换完全执行此操作。 不需要JS。 http://jsfiddle.net/h6dT2/2/

.thumb {
    background: blue;
    position: absolute;
    height: 200px;
    width: 100%;
}
.copy {
    margin: 0 auto;
    margin-top: 140px;
    opacity: 0;
    width: 200px;
    -webkit-transition: .5s all ease;
}
.thumb:hover .copy {
    margin-top: 80px;
    opacity: 1;
}
body {
    margin: 0px;
    color: #fff;
}
@media (max-width: 1024px) {
    .copy { 
        margin-top: 20px;
    }
}

这并不能解决您问题的每个部分，但它可以让您清楚地知道要去哪里。

Answer 2

你的意思是屏幕高度或屏幕宽度？

如果你想做高度，你可以使用百分比值，如：

'margin-top': '25%'

这将适应高度。

如果要根据宽度进行计算，则需要在window上调用width()方法

$(window).width();

所以你可以说：

var width = $(window).width();

'margin-top': width

为了更好地了解某些屏幕宽度的示例，您可以执行以下操作：

var windowWidth = $(window).width();
var margin= 0; //default value
if(windowWidth > 1281) {
  margin = 100;
}
else if(windowWidth > 1024) {
  margin = 75;
}
else if (windowWidth > 768) {
  margin = 50;
}
else margin = 25;

然后在你的JQuery中你可以说：

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':margin});
}, function () { //Frame 3
    $('.copy').animate({'margin-top': (margin+60) }); //or whatever calculation you want to do for the other value, it's up to you.
});