如何根据屏幕大小创建视口？

Question

我有一个有趣的小项目，它是一个无法点击的按钮。 所以基本上我想要的是整个东西都适合屏幕，但它不适合全屏，它只是在左上角。

我怎样才能使它成为我屏幕的大小并将其居中。 按钮也应该在整个屏幕中移动。

 $(".block").mouseover(function() { $(".block").animate({ left: (Math.random() * 650), top: (Math.random() * 450), }, "fast"); });

 .main { border: 1px solid black; width: 700; height: 500; }.block { position: absolute; left: 50px; width: 130px; height: 50px; margin: 5px; }.button { width: 60px; height: 60px; border: 1px solid white; background-color: purple; font-size: 10px; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <div class="main"> <div class="block"> <button type="button" class="button">Catch me</button> </div> </div>

Answer 1

希望这会奏效：

.main {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

Answer 2

您将不得不尝试更多，但我采用了document的完整宽度和高度，它移动得更多，但它可能会移动到浏览器之外，因此您需要验证这一点。 我还为您的块更改了 css，现在您有填充而不是高度和宽度，高度和宽度实际上比按钮小。

 $(".block").mouseover(function() { $(".block").animate({ left: (Math.random() * $(document).width()), top: (Math.random() * $(document).height()), }, "fast"); });

 body { padding: 0; }.main { border: 1px solid black; width: 100vw; height: 100vh; }.block { position: absolute; left: 50px; padding: 30px; background-color: aqua; }.moving-element { width: 60px; height: 60px; border: 1px solid white; background-color: purple; font-size: 10px; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <div class="main"> <div class="block"> <button type="button" class="moving-element">Catch me</button> </div> </div>