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

Question

我有一个带有 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>

Answer 1

这个问题可能是模棱两可的。实现的解决方案肯定是。浏览器是可调整大小的，因此你不能有既是正方形又是浏览器宽度和高度的固定百分比的框。 20vh 表明您的目标是 5 行，而 10% 表明您想要 10 列。由于您无法阻止用户调整窗口大小，因此需要做出权衡。如果最重要的方面是保持正方形，那么宽度和高度必须相同。这为您提供了使用宽度、高度或两者的某种组合作为单位的选项。对 CSS 进行一些小的更改，可以使这个正方形的宽度和高度都使用 10vh(视口(viewport)宽度的 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>