Increment Negative Value Of Property Based On Window Size By Less Than 1px

This question is very similar with other. The only difference (and for me is a huge difference because I cannot figure it out) is the value of the CSS value increment. I have an el

Solution 1:

CSS version:

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

JS version:

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)

Solution 2:

This code can work, but I don't think that this is the best way to do it ...

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";
    }
  }
}