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

问题描述

我不知道这个问题有一个容易或硬的答案。

I don't know if this question has an easy or hard answer.

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

The situation is that I have an element on the page with negative margin:

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

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

It works well with a screen size 1440x532 (check with Chrome's inspector element).

我想要的是一个简单的解释。

What I want is kind of simple to explain.

我想增加1个像素）在窗口大一个像素的任何时候，元素的左边缘：

I want an increase of 1 pixel (for instance) in the margin-left of the element anytime the window is larger by one pixel:

因此，如果窗口大小为1441，元素的左边距为 - 194px。如果窗口大小为1451，元素的左边距为-184px。

So, if window size is 1441, the margin-left of the element be -194px. If the window size is 1451, the margin-left of the element be -184px.

以同样的方式，我希望这个工作时从1440px向上。

In the same way, I want this to work from 1440px upwards.

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

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?)

推荐答案

其他用户给你的Jquery解决方案完美地用于此用途，也可以使用CSS-only选项（即使用户已禁用脚本也可以使用它。）

The Jquery solutions that other users gave you works perfectly for this use, but if you prefere you can also use a CSS-only alternative (it works even if the user has disabled scripts!).

它还有一个好的浏览器之间的支持

您可以通过这种方式实现CSS：

You can implement your CSS in this way:

    #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
告诉我这是不是你的意思

It adds a pixel for each pixel above 1440 Tell me if this is what you mean

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