根据浏览器窗口的宽度和高度调整div样式的大小-jQuery

Question

我正在尝试将浏览器的宽度和高度更改为.test div。 每当我调整浏览器大小时，当前值都应更改。

 $(document).ready( function() { window.onresize = function(event) { resizeDiv(); } function resizeDiv() { var vpw=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var vph=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight; $('.test').css({'height': vph + 'px'}); } ); 

 .test { background: green; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="test"></div> 

Answer 1

例

例

JS

function resize() {
    $(".test").css({
    width:  $(window).width(),
    height: $(window).height()
});
}
 resize();
$(window).resize(function(){
 resize();
});

如果要减去一些像素

function resize() {
    $(".test").css({
        width:  $(window).width() - 15,
        height: $(window).height() - 15
    });
 }

Answer 2

Uncaught SyntaxError：意外的令牌非法

您使用'和'。 为了运行脚本，您需要使用'或'。

Answer 3

您所要求的最佳实践是使用响应式设计： http : //sensitivedesign.is/examples/playgrounds-and-sandboxes/lots-of-donuts

例如：

@media only screen and (min-width: 1300px) { #divId {width:1000px;}}

@media screen and (max-width: 860px) {#divId {width:800px;} }

@media screen and (max-width: 650px) { #divId {width:600px;}}

@media screen and (max-width: 480px) { #divId {width:400px;}}