基於窗口大小遞增負值屬性

我不知道這個問題是否有簡單或者難以回答的問題。基於窗口大小遞增負值屬性

的情況是，我有負保證金頁面上的元素：

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

它與屏幕大小1440x532（與Chrome的督察檢查元素），效果很好。

我想要的是一種簡單的解釋。

我想在利潤率左元素隨時窗口是由一個像素更大的增加1個像素（例如）的：

因此，如果窗口尺寸是1441，與容限左的元素是-194px。如果窗口大小爲1451，則該元素的左側空白爲-184px。

以同樣的方式，我想這從1440px向上工作。

重要提示：我想要的是左邊距的動態值，它基於屏幕大小而增加，而不是一種媒體查詢，它會使屏幕大小的間隔始終保持相同。我想要的會迫使我添加大量的媒體查詢。

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

來源

2016-05-29 viery365

jQuery的解決方案，其他用戶給你完美的作品用於這一用途，但如果你prefere你也可以使用一個唯一的CSS-替代（它的工作原理，即使用戶已禁用腳本！）。

它得到了也是一個不錯的support among browsers

你可以實現你的CSS這樣：

#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每個像素告訴我一個像素，如果這是你的意思

來源

2016-05-29 10:09:03

謝謝:)這幾乎是完美的，因爲完全是CSS。它幾乎在那裏。只有兩件事：我不得不在媒體查詢中將最大寬度更改爲最小寬度，並且發生了一件很奇怪的事情：當屏幕尺寸達到1440像素時，剩餘空間從-195像素變爲-235像素，但之後效果很好從任何時候屏幕增大1個像素的大小增加一個像素。我將調整數字以查看會發生什麼。也許我的特異性有問題。然後，我會給你反饋。 – viery365

好的，我所做的是將最小寬度更改爲1440。與-195px和-235px（40px）之間的區別與此相關。如果您願意，我會稍微編輯您的答案，並將其標記爲正確答案。非常感謝！！！ – viery365

行動中，我錯過了。感謝您的編輯。很高興幫助你 –

是是否有可能使用jQuery與resize()

$(window).resize(function() { 
    if (($(window).width() <= 1441)) { 
    $('.element').css('margin-left', "-194px") 
    }else if($(window).width() <= 1451){ 
    $('.element').css('margin-left', "-184px") 
    } 

});

但我建議你使用媒體查詢的CSS：

@media screen and (max-width: 1441px) { 
    .element { 
    margin-left: -194px; 
    } 
} 

@media screen and (max-width: 1451px) { 
    .element { 
    margin-left: -184px; 
    } 
}

來源

2016-05-29 09:47:55 Gintoki

非常感謝您的快速回答！我會嘗試，然後我給你反饋 – viery365

在這種情況下，與CSS的問題是，如果我想爲不同的屏幕大小不同的值，我不得不做'無限'的媒體查詢。從該屏幕尺寸向上，剩餘邊距的值將保持不變。但我明白你的觀點。 – viery365

所以問題解決了？或不？ – Gintoki

這是不可能的CSS因爲沒有屬性或方法來捕獲窗口大小。如果有的話，可以使用calc()來完成。

但是，這是可能的JavaScript。

function resizeScreen() { 
    var windowWidth = $(window).width(); 
    var $element = $('.element'); 

    if (windowWidth > 1440) { 
     // Calculate the new (negative) margin by subtracting the windows width by 1440 (e.g. 1500-1440 = 60). The new margin would be: -195 + 60 = -135. 
     var newMargin = $element.css('margin-left') + (windowWidth - 1440); 

     $('.element').css('margin-left', newMargin) 
    } 
} 

$(window).resize('resizeScreen');

來源

2016-05-29 09:54:30 JasonK

謝謝你的回答。我會嘗試一下:) – viery365

這完美的作品。我選擇了另一個答案，因爲CSS只有問題，但是這個工作也很好。不過，我會考慮您的意見，我會在不同的瀏覽器中嘗試。無論如何，這個問題已經出現了其他問題。經過測試，邊距值增加1px對於我所需要的太多了。我的佈局需要的是更小的增加，如每像素屏幕像素增量0.1像素。我會在這裏添加另一個問題，我會讓你知道。無論如何，非常感謝您的幫助！ – viery365

另一個問題在這裏:) http://stackoverflow.com/q/37510459/4551792 – viery365

基於窗口大小遞增負值屬性

回答

相關問題