Question

这个问题与other非常相似。唯一的区别（对我来说是巨大的差异，因为我无法弄明白）是CSS值增量的值。

我在页面上有一个带有负边距的元素，在另一个问题中，我希望每次屏幕增大1个像素时增加1个像素，从1400px宽的向上开始。

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

因此，如果窗口大小为1440px宽，则元素的左边距应为-195px，如果窗口大小为1441px宽，则元素的左边距应为-194px，或者如果窗口大小为1451px宽元素的左边距应为-184px，依此类推。

答案很棒，我解决了（使用CSS或javaScript）。

.........................

然而现在已经实现了，我注意到元素的边距只需要0.1像素的增量而不是1个像素：

所以：

如果窗口大小为1440px宽，则元素的左边距应为-195px。

如果窗口大小为1441px宽，则元素的左边距应为-194.9px

或者如果窗口大小为1452px宽，则元素的左边距应为-193.8px，依此类推。

从1400px宽度开始。

我知道问题非常相似。不过我觉得这个是不同程度的。

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

这可以用javaScript或jQuery吗？（甚至是CSS？）

Answer 1

CSS版本：

@media screen and (min-width: 1440px) {
  .element {
    margin-left: calc(-195px + (100vw - 1440px) * 0.1);
  }
}

JS版：

var element = $('.element'), windowWidth, x;

$(window).resize(function () {
  if ($(window).width() > 1440) {
    windowWidth = $(window).width();
    x = (windowWidth - 1440) * 0.1;
    element.css('margin-left', -195 + x);
  } else {
    element.css('margin-left', -195)
  }
});

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

CODEPEN EXAMPLE (CSS)

CODEPEN EXAMPLE (JS)

Answer 2

此代码可以使用，但我认为这不是最好的方法...

var elements = document.getElementsByTagName('element');

window.onresize = function(){
  if (window.innerWidth >= 1400) {
    var margin, i;
    margin = -195 - (0.1*(window.innerWidth - 1400));
    for (i=0; i < elements.length; i++) {
      elements[i].style.marginLeft = margin + "px";
    }
  }
}

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

2 个答案:

CODEPEN EXAMPLE (CSS)

CODEPEN EXAMPLE (JS)