基于窗口大小将属性的负值增加小于1px [英] Increment negative value of property based on window size by less than 1px

问题描述

此问题与其他非常相似。
唯一的区别（对我来说是一个巨大的区别，因为我不能弄清楚）是CSS值增量的值。

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.

我有一个元素在页面上具有负边距，在另一个问题，我想它每增加1像素增加1像素，从1400px宽向上开始增加1像素。

I have an element on the page with negative margin and in the other question I wanted it to increment by 1 pixel each time the screen was larger by 1 pixel, starting on 1400px wide upwards.

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

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

So, if the window size was 1440px wide the margin-left of the element should be -195px, if the window size was 1441px wide the margin-left of the element should be -194px or if the window size was 1451px wide the margin-left of the element should be -184px and so on.

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

The answers were awesome and I got it resolved (with CSS or javaScript).

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

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

但是现在实现我注意到，而不是1像素的元素margin只需要0.1像素的增量：

However now that is implemented I noticed that instead of 1 pixel the element's margin needs only 0.1 pixels of increment:

因此：

如果窗口大小为1440像素宽，的元素应该是-195px。

if window size is 1440px wide the margin-left of the element should be -195px.

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

If the window size is 1441px wide the margin-left of the element should be -194.9px

如果窗口大小为1452像素宽，元素的左边距应为-193.8像素，等等。

or if the window size is 1452px wide the margin-left of the element should be -193.8px and so on.

从1400px宽向上开始。

Starting at 1400px wide upwards.

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

I am aware that the questions are very similar. However I feel this one is a different level somehow.

重要注意：我想要的是一个动态值左边缘增加基于屏幕尺寸，而不是一个种类的媒体查询，这将使得值在屏幕尺寸的间隔之间始终保持相同。我想要的是强制我添加大量的媒体查询。

IMPORTANT NOTE: What I want is a dynamic value for the margin-left that increases based on screen size and not a kind of media query which would make the value always remain the same between an interval of screen sizes. What I want would force me to add a massive number of media queries.

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

Is this possible with javaScript or jQuery? (or even 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');

这篇关于基于窗口大小将属性的负值增加小于1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！