得到一個CSS計算百分比結果

我想派生一些響應式的CSS，優雅地調整圖像元素的大小。得到一個CSS計算百分比結果

在一個範圍內（@media screen and (min-width: 600px) and (max-width: 960px)）我希望我的圖像的百分比寬度屬性有所不同。

具體來說，在960，我希望它實際上是width: 50%，但低於600，我希望它有效地爲width: 38.1966%。對於寬度縮減的每個像素，我需要的寬度減少0.032787％。

到目前爲止，我找不到處理calc()的方法。

我實際上需要先執行基本計算：(960px - 100vw)。不幸的是，這給出了像素的結果，而我需要它轉換成數字，我可以乘以我的目標百分比變化。

這有可能嗎？

來源

2014-10-17 Rick

它必須是唯一的CSS？你可以使用jQuery嗎？ – starvator 2014-10-17 12:29:24

我只通過CSS給出了答案 - 但如果你願意嘗試這樣做，可以通過像LESS這樣的事情來做到這一點。 http://lesscss.org/ - 特別是語言功能/操作視圖：http://lesscss.org/features/#features-overview-feature-operations – remixdesign 2014-10-17 13:05:08

如果你想使用jQuery：

一旦你在CSS像你提到的計算值，你得到var itemWidth = $('#id').innerWidth();得到它。然後，你可以得到網頁的寬度與var bodyWidth = $('body').innerWidth();

所以，你可以寫一個使用bodyWidth和itemWidth計算百分比var percentVar= itemWidth/bodyWidth * 100;並用它來設置一個項目$("#id").css("width", percentVar);寬度的腳本。

所以，jQuery的看起來會沿着這些路線：

var main = function(){ 
    var itemWidth = $('#id').innerWidth(); 
    var bodyWidth = $('body').innerWidth(); 
    var percentVar= itemWidth/bodyWidth * 100; 
    $("#id").css("width", percentVar); 
} 

$(document).ready(main)

或者，如果你想重新使用它，做一個函數，並把在主功能

var main = function(){ 
    element_sizer('#id'); 
    element_sizer('#id2'); 
} 

$(document).ready(main)  

function element_sizer(id) { 
    var itemWidth = $(id).innerWidth(); 
    var bodyWidth = $('body').innerWidth(); 
    var percentVar= itemWidth/bodyWidth * 100; 
    $(id).css("width", percentVar); 
}

注意：你可以使用width，innerWidth,outerWidth取決於你需要什麼link

來源

2014-10-17 12:42:47 starvator

不幸的是，這使用內聯css污染客戶端代碼。雖然其他人似乎認爲這樣很好，但我覺得它遠離基於表格的佈局。（我調整到連接類而不是id不會是一個問題 - 有一堆元素在那裏。）我也忘了提及...沒有jQuery。 – Rick 2014-10-17 12:46:47

@瑞克好運，那麼，我不認爲你可以用純css – starvator 2014-10-17 12:51:39

謝謝。我也這麼想 - 他們沒有看到真正有趣的東西。 – Rick 2014-10-17 13:32:09

純CSS ..這是磨刀石stly一個爛攤子，但它會工作：

小提琴： http://jsfiddle.net/r9xwL0rb/

CSS：

@media screen and (min-width: 600px) and (max-width: 960px){img{width: 50%;}} 
@media screen and (min-width: 600px) and (max-width: 959px){img{width: 49.96721278%;}} 
@media screen and (min-width: 600px) and (max-width: 958px){img{width: 49.93442556%;}} 
@media screen and (min-width: 600px) and (max-width: 957px){img{width: 49.90163833%;}} 
... etc (see fiddle for complete source)

來源

2014-10-17 13:02:15 remixdesign

謝謝@remixdesign，我想這是真的。（儘管技術上可以將它們分成3-5組，但到了40％時爲0。需要2％的差異來改變像素寬度。）但同意 - 該死的凌亂。 – Rick 2014-10-17 13:31:21

不客氣 - 次要更新（不嵌套在主要媒體內的媒體查詢 - 這是一個疏忽。）爲你創建了一個小提琴！如果有幫助，請接受答案！ – remixdesign 2014-10-17 13:33:27

得到一個CSS計算百分比結果

回答

相關問題