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

实施例

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：意外的标记ILLEGAL

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

Answer 3

您要求的最佳做法是使用自适应设计：http://responsivedesign.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;}}

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

3 个答案: