根据窗口大小增加属性的负值

Question

我不知道这个问题的答案是简单还是困难。

情况是我在页面上有一个负边距的元素：

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

它在屏幕尺寸为1440x532的屏幕上效果很好（请与Chrome的inspector元素一起检查）。

我想要的是一种简单的解释。

每当窗口大一个像素时，我希望在元素的左边距增加一个像素（例如）：

因此，如果窗口大小为1441，则元素的左边距为-194px。 如果窗口大小为1451，则元素的左边距为-184px。

同样，我希望它从1440px以上开始工作。

重要说明：我想要的是根据屏幕尺寸增加的左边距动态值，而不是一种媒体查询，它会使该值在屏幕尺寸间隔之间始终保持不变。 我想要的将迫使我添加大量的媒体查询。

javaScript或jQuery是否可能？ （甚至CSS？）

Answer 1

对于CSS，这是不可能的，因为没有属性或方法可捕获窗口大小。 如果有的话，可以使用calc() 。

但是，使用JavaScript可以做到这一点。

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

Answer 2

其他用户为您提供的Jquery解决方案可以完美地用于此用途，但是如果您愿意，也可以使用仅CSS的替代方法（即使用户禁用了脚本，它也可以使用！）。

在浏览器中也得到了很好的支持

您可以通过以下方式实现CSS：

    #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 3

是的，有可能使用带有resize（）的 Jquery

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

});

但我建议您在CSS中使用媒体查询：

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

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