重新调整div风格尊重浏览器窗口的宽度和高度 - jQuery的

Question

我想改变浏览器的宽度和高度为.test股利。无论何时我重新调整浏览器的大小，当前值都会改变。

$(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

例

example

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

未捕获的SyntaxError：意外的标记非法

您使用“和”。为了使你的脚本来运行你需要使用“或”。

Answer 3

您所要求的最佳做法是使用响应式设计：（ '测试 '）：

例如

@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;}}