자바 스크립트 미디어 쿼리로 스타일 적용하기

Question

Im은 'margin-top'값을 화면 폭에 따라 '.copy'로 설정하려고합니다. JS 변수로 설정해야하지만 최상의 솔루션을 듣기 위해 열어야한다고 생각하십시오.

JS Fiddle

JS 이상적

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

I 화면 폭을위한 마진 셋톱하고자 :

호버 블루 블록 JS 효과를

기존 예를 보려면 ,> 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

$(window).width();

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