[英]Increment negative value of property based on window size by less than 1px
这个问题与其他问题非常相似。 唯一的区别(对我来说是一个很大的区别,因为我无法弄清楚)是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');
这段代码可以工作,但是我不认为这是最好的方法...
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";
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.