使用窗口调整li方块的大小
使用窗口调整li方块的大小
提问于 2019-01-14 20:15:43
我有一个完整的宽度和高度与安莉覆盖的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>
回答 1
Stack Overflow用户
发布于 2019-01-14 21: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54181405
复制相关文章
相似问题
腾讯云开发者
