ウィンドウサイズに基づいてプロパティの負の値を増やす

Question

この質問には簡単な答えがあるのか​​分かりません。

状況は、私は、負のマージンとページ上の要素を持っているということです。

.element { 
margin-left: -195px; 
} 

それは画面サイズ1440x532でうまく動作（Chromeのインスペクタ要素に確認してください）。

私が欲しいのは、説明するのは簡単です。

私は窓を1つの画素だけ大きいのmargin-left要素のいつで（例えば）1つのピクセルの増加たい：ウィンドウサイズは1441、のマージン左であれば、そう

を要素は-194ピクセルです。ウィンドウサイズが1451の場合、要素の余白は-184pxになります。

同じように、私はこれを1440px以上から動作させたいと思います。

重要な点：画面サイズに基づいて増加するメディアのクエリではなく、画面サイズの間隔の間に常に値が同じになるようにする余白の動的値です。私が望むのは、膨大な数のメディアクエリーを追加することになります。

これはjavaScriptまたはjQueryで可能ですか？ （？あるいはCSS）

Answer 1

jQueryのソリューション。

それはあなたがこの方法であなたのCSSを実装することができ、良好なsupport among browsers

を持っている：

#element{ 
     margin-left: -195px; 
    } 
    @media screen and (min-width: 1440px){ 
     #element{ 
      margin-left: calc(-195px + 100vw - 1440px); //100vw is the width of the screen 

     } 
    } 

それは1440以上の各ピクセルのピクセルを追加 これはあなたが

何を意味するかである場合を教えてください

Answer 2

はい、それはresize()

$(window).resize(function() { 
    if (($(window).width() <= 1441)) { 
    $('.element').css('margin-left', "-194px") 
    }else if($(window).width() <= 1451){ 
    $('.element').css('margin-left', "-184px") 
    } 

}); 

でjQueryを使っても可能ですが、私はCSSでメディアクエリを使用するためにあなたにお勧め：

@media screen and (max-width: 1441px) { 
    .element { 
    margin-left: -194px; 
    } 
} 

@media screen and (max-width: 1451px) { 
    .element { 
    margin-left: -184px; 
    } 
} 

Answer 3

これはCSSでは不可能ですウィンドウサイズを取得するプロパティやメソッドがないためです。存在する場合は、calc()を使用してこれを行うことができます。

ただし、これはJavaScriptでも可能です。他のユーザーがあなたはこの使用のために完璧に動作しましたが、あなたはまた、CSSのみの選択肢を使用することができますprefere場合（これは、ユーザがスクリプトを無効にしている場合でも動作します！）

function resizeScreen() { 
    var windowWidth = $(window).width(); 
    var $element = $('.element'); 

    if (windowWidth > 1440) { 
     // Calculate the new (negative) margin by subtracting the windows width by 1440 (e.g. 1500-1440 = 60). The new margin would be: -195 + 60 = -135. 
     var newMargin = $element.css('margin-left') + (windowWidth - 1440); 

     $('.element').css('margin-left', newMargin) 
    } 
} 

$(window).resize('resizeScreen');