Question

我希望有灵活的宽度，我的意思是当我尝试调整窗口大小时我的窗口宽度自动更改（基于窗口宽度）而不刷新

我想在我的示例文档中执行此操作，我该怎么做？

我的示例文档：

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

$(document).ready(function() {
    var Ww = $(window).width()
    var Wh = $(window).height()
    $('.test').css({"width":Ww+"px","height":Wh+"px"});
});
</script>
<style>
* {
    margin:0;
    padding:0;
}
.test {
    background-color:#000;
}
</style>
</head>
<div class="test"></div>
<body>
</body>
</html>

Answer 1

function resizer(){
    var Ww = $(window).width(),
        Wh = $(window).height();
    $('.test').css({width:Ww, height:Wh});
}

$(function(){ // DOM READY
    resizer();
});

$(window).resize(function(){
    resizer();
});

Answer 2

您可以通过CSS执行此操作，无需使用jQuery。

.test {
  width: 100%;
  height: 100%;
  position: absolute;
}

但是如果你还有任何理由通过jQuery这样做，你需要添加以下功能。

<script>
$(window).resize(function() {
    var Ww = $(window).width()
    var Wh = $(window).height()
    $('.test').css({"width":Ww+"px","height":Wh+"px"});
});

$(document).ready(function() {
    var Ww = $(window).width()
    var Wh = $(window).height()
    $('.test').css({"width":Ww+"px","height":Wh+"px"});
});
</script>

jQuery - 在resize上创建灵活的宽度

2 个答案: