问使用窗口调整li方块的大小
EN

Stack Overflow用户

提问于 2019-01-14 12:15:43

回答 1查看 61关注 0票数 0

我有一个完整的宽度和高度与安莉覆盖的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>

html

css

javascript

jquery

回答 1

Stack Overflow用户

发布于 2019-01-14 13:57:56

这个问题可能是不明确的。实现的解决方案肯定是。浏览器是可调整大小的，因此你不能让框既是方形的，又是浏览器宽度和高度的固定百分比。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>