重新调整div样式相对于浏览器窗口的宽度和高度 - Jquery

I'm trying to change browser width and height into .test div. whenever I re-size the browser the current value should change.

我正在尝试将浏览器宽度和高度更改为.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>

3 个解决方案

#1

Example

例

example

例

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

if you want minus some pixels

如果你想减去一些像素

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

#2

Uncaught SyntaxError: Unexpected token ILLEGAL

未捕获的SyntaxError：意外的标记ILLEGAL

You use ‘ and ’. In order that your script to run you need to use ' or ".

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

#3

Best practice for what you are asking is to use responsive design: http://responsivedesign.is/examples/playgrounds-and-sandboxes/lots-of-donuts

您要问的最佳做法是使用响应式设计：http：//responsivedesign.is/examples/playgrounds-and-sandboxes/lots-of-donuts

for example:

例如：

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

#1