Erhöhen Sie den negativen Wert der Eigenschaft basierend auf der Fenstergröße

Question

Ich weiß nicht, ob diese Frage eine einfache oder harte Antwort hat.

Die Situation ist, dass ich ein Element auf der Seite mit einem negativen Marge habe:

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

Es funktioniert gut mit einer 1440x532 Bildschirmgröße (Kontrolle mit Chrome Elemente Inspektoren).

Was ich will, ist irgendwie einfach zu erklären.

Ich möchte einen Anstieg von 1 Pixel (zum Beispiel) in der margin-left des Elements jederzeit das Fenster größer durch ein Pixel ist:

Also, wenn die Fenstergröße 1441 ist die margin-left des Element sein -194px. Wenn die Fenstergröße 1451 ist, ist der Rand links des Elements -184px.

In der gleichen Weise möchte ich das von 1440px aufwärts arbeiten.

WICHTIGER HINWEIS: Was ich möchte, ist ein dynamischer Wert für den linken Rand, der auf der Grundlage der Bildschirmgröße zunimmt und nicht eine Art von Medienabfrage, die den Wert zwischen einem Bildschirmgrößenintervall immer gleich bleiben lässt. Was ich will, würde mich zwingen, eine massive Anzahl von Medienanfragen hinzuzufügen.

Ist dies mit javaScript oder jQuery möglich? (Oder sogar CSS?)

Answer 1

Die JQuery-Lösungen, die anderen Nutzer geben Sie funktionieren perfekt für diesen Einsatz, aber wenn Sie prefere Sie können auch eine CSS-only Alternative verwenden (es funktioniert auch, wenn der Benutzer Skripts deaktiviert hat!).

Es hat eine auch gute support among browsers

Sie Ihre CSS auf diese Weise implementieren können:

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

     } 
    } 

Es fügt ein Pixel für jedes Pixel über 1440 Sag mir, wenn das, was Sie

meine ist,

Answer 2

Ja ist es möglich, mit JQuery mit resize()

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

}); 

Aber ich schlage vor, Sie Medienanfragen mit CSS zu verwenden:

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

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

Answer 3

Dies ist nicht möglich mit CSS da es keine Eigenschaft oder Methode zum Erfassen der Fenstergröße gibt. Wenn dies der Fall wäre, könnte dies unter Verwendung von calc() durchgeführt werden.

Dies ist jedoch mit JavaScript möglich.

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');