javascript - 使用 javascript 媒体查询应用样式

Question

我正在尝试根据屏幕宽度为“.copy”设置不同的“margin-top”值。认为它需要用 JS 变量设置，但打开听取最佳解决方案。

悬停蓝色方 block 看js效果

现有例子:

JS Fiddle

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

这并不能解决您问题的所有部分，但它可以让您很好地了解去哪里。