2014-02-19 110 views
-1

有人可以给我一个jsfiddle的源代码,当宽度jquery可以通过更改窗口大小设置css?CSS设置元素宽度由屏幕宽度

我的英雄名单不是很好,我试图在网上搜索,但没有找到。

+0

你的意思'宽度:100%'? –

回答

0

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"; 
    } 
}); 
+0

其伟大的,但在哪里可以按大小设置一个CSS元素? – user3327101

+0

@ user3327101我已更新我的答案,以向您展示如何在调整大小时更改元素宽度。 –

1

我认为这是你在找什么:

如果你的元素有类element

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

然后,你可以做这样的事情window.innerWidth/2window.innerWidth - 50

+0

yeand我可以在哪里设置大小的CSS? – user3327101

+0

@ user3327101我只是做了一个编辑来显示。 – apohl

+0

感谢您的帮助我 – user3327101