使用 javascript 媒体查询应用样式答案

【问题标题】：applying a style with javascript media query使用 javascript 媒体查询应用样式
【发布时间】：2013-07-17 23:25:16
【问题描述】：

我试图根据屏幕宽度为“.copy”设置不同的“margin-top”值。认为它需要使用 JS 变量进行设置，但可以听取最佳解决方案。

悬停蓝色块查看js效果

现有示例：

JS Fiddle

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

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

【问题讨论】：

标签： javascript css media-queries

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

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

【讨论】：

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

【讨论】：