如何根據屏幕大小創建視口？

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>