Question

我不知道这个问题是否容易或难以回答。

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

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

适用于1440x532的屏幕尺寸（请查看Chrome的检查器元素）。

我想要的东西很容易解释。

我想要在窗口大一个像素的时候在元素的左边缘增加1个像素（例如）：

因此，如果窗口大小为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的替代方案（即使用户已禁用脚本，它也能正常工作！）。

它也有一个很好的support among browsers

您可以通过以下方式实现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

是的，Jquery可以使用resize()

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

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

3 个答案: