應用javascript媒體查詢

Question

我試圖根據屏幕寬度爲'.copy'設置不同的'margin-top'值。認爲它需要用JS變量設置，但是可以聽到最好的解決方案。

懸停藍色塊看到的js效果

現有例子：

JS Fiddle

JS

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

理想我想設定邊距爲屏幕寬度，> 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%'

這將調整到高度。

如果你想要做的基於寬度計算你需要調用width()方法上window

$(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. 
});