javascript - 根据窗口大小将属性的负值增加不到1像素

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

我在页面上有一个具有负边距的元素，在另一个问题中，我希望屏幕每次宽1像素时，它就以1400像素向上的宽度递增1像素。

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

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

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

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

但是，现在实现了，我注意到元素的边距不需要1像素，而仅需要增加0.1像素：

所以：

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

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

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

从1400px宽开始。

我知道这些问题非常相似。但是我觉得这是一个不同的层面。

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

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

最佳答案

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)

关于javascript - 根据窗口大小将属性的负值增加不到1像素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37510459/