如果你想使用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
它必須是唯一的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