CSS設置元素寬度由屏幕寬度

Question

有人可以給我一個jsfiddle的源代碼，當寬度jquery可以通過更改窗口大小設置css？

我的英雄名單不是很好，我試圖在網上搜索，但沒有找到。

Answer 1

JavaScript示例：在調整大小JSFiddle Demo

更改元素的CSS：

如果viewport寬度小於800，那麼它將改變#test DIV

HTML

的寬度

<h1 id="width"></h1> 
<div id="test"></div> 

CSS

#test { width:200px; height:50px; background:red; } 

的Javascript

// set the initial width 
var viewportWidth = document.documentElement.clientWidth; 
var el = document.getElementById("width"); 
el.innerHTML = viewportWidth + "px"; 

// on resize 
window.addEventListener('resize', function(event){ 

    var viewportWidth = document.documentElement.clientWidth; 
    var test = document.getElementById("test"); 
    var el = document.getElementById("width"); 

    el.innerHTML = viewportWidth + "px"; 

    if(viewportWidth < 800){ 
     test.style.width = "500px"; 
    } 
}); 

Answer 2

我認爲這是你在找什麼：

如果你的元素有類element

$(window).resize(function() { 
    $(".element").css("width", window.innerWidth;); 
}); 

然後，你可以做這樣的事情window.innerWidth/2或window.innerWidth - 50。