Question

我将我的页面拆分为三个div，并且我正在尝试使用jquery设置它们的尺寸，以便每个div的大小始终与窗口相同。

我的代码正在运行，但在连续几次窗口调整大小后，div调整大小开始滞后。在浏览器窗口出现崩溃之前，调整窗口大小越多，这种滞后越大越大。

我能做些什么来使调整更平滑并防止崩溃？

这是我的代码：

$(document).ready(function() {

  sectionSize()

  function sectionSize() {

    var w = []
    var h = []

    var docWidth = $(window).width()
    var docHeight = $(window).height()

    w.push(docWidth);
    h.push(docHeight);

    $(".section").css({
      "height": h,
      "width": w
    });

    $(window).on('resize', function() {
      w.push(docWidth);
      h.push(docHeight);
      sectionSize()
    });
  }

})

body {
  margin: 0;
}
.section {
  position: relative;
}
.section p {
  position: absolute;
  bottom: 5px;
  left: 45%;
}
#top {
  background-color: blue;
}
#middle {
  background-color: red;
}
#bottom {
  background-color: green;
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="script.js"></script>


</head>

<body>

  <div class="section" id="top">
    <p>next</p>
  </div>

  <div class="section" id="middle">
    <p>next</p>
  </div>

  <div class="section" id="bottom">
    <p>next</p>
  </div>

</body>

</html>

Answer 1

你能不能只使用CSS height:100vh;？将其应用于.section

这是一个小提琴：http://jsfiddle.net/gsgoruja/1/

Answer 2

html的头标记中的

<meta name="viewport" content="width=device-width, initial-scale=1.0">。

在css中使用媒体查询 -

@media screen and (max-width: 400px) {
        .section{
           height : 100px;
           width : 400px;
        }
      }

@media screen and (min-width:450px){
    .section{
       height : //change your css accordingly
       width : //change your css accordingly
    }

}

用jquery崩溃窗口调整div的大小

2 个答案: