javascript - 使用窗口调整li正方形的大小

我有一个完整的宽度和高度div与李覆盖。 li的宽度为10％，高度为20vh，以适合整个div作为正方形。但是，在调整大小时，这不适用于div。

我曾尝试使用％和vh，但仍然存在调整大小的问题。我要遵循以下设计：-https://adictic.com/home

jQuery(function($) {
  $('.squares li').mouseenter(function() {
    $(this).animate({
      opacity: '0.4'
    });
  }).mouseout(function() {
    $(this).animate({
      opacity: '0'
    });
  });
});

.squares {
  position: absolute;
  top: 0;
  z-index: 99;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}

.squares li {
  width: 10%;
  height: 20vh;
  list-style-type: none;
  background: none;
  float: left;
  background: #ccc;
  transition: 0.4s;
  opacity: 0;
  cursor: pointer;
}

main {
  width: 100%;
  height: 100vh;
  background-image: url("/images/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: table;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <ul class="squares">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</main>

最佳答案

这个问题可能是模棱两可的。实施的解决方案肯定是。浏览器可调整大小，因此您不能同时使用方形和固定宽度的浏览器宽度和高度。 20vh显示您的目标是5行，而10％显示目标是10列。由于无法阻止用户调整窗口大小，因此需要进行权衡。如果最重要的方面是保持正方形，则宽度和高度必须相同。这使您可以选择使用宽度，高度或两者的某种组合作为单位。对CSS进行一些小的更改即可使该正方形的宽度和高度都使用10vh（视口宽度的10％）。

jQuery(function($) {
  $('.squares li').mouseenter(function() {
    $(this).animate({
      opacity: '0.4'
    });
  }).mouseout(function() {
    $(this).animate({
      opacity: '0'
    });
  });
});

  .body, html {
  padding: 0;
  margin: 0;
}

main {
  width: 100vw;
  left: 0;
  height: 100vh;
  background: red;
  position: absolute;
  display: table;
}

.squares {
  position: absolute;
  top: 0;
  z-index: 99;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  background: blue;
}

.squares li {
  width: 10%;
  height: 10vw;
  list-style-type: none;
  float: left;
  background: none;
  background: #ccc;
  transition: 0.4s;
  opacity: 0;
  cursor: pointer;
  background: orange;
}

.squares li:nth-child(10n+0) {
  clear: left;
}
.squares li:nth-child(10n+10) {
  right: 0;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <ul class="squares">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</main>

关于javascript - 使用窗口调整li正方形的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54181405/