javascript - 制作基于 jQuery 的正方形调整大小

Question

所以我有一个，其中每个 li 是一个正方形。现在

css 中的宽度基于的百分比，希望它响应。因此，我使用 jQuery 来获得与宽度相同的高度以使它们成为正方形。

但是，在调整大小时，只有宽度会受到影响，高度会保持原来的加载值。无论如何要解决这个问题？

这是我的代码：

html:

 <ul>
    <li class="square">item1</li>
    <li class="square">item1</li>
    <li class="square">item1</li>
    <li class="square">item1</li>
 </ul>

CSS：

ul{
width: 50%;
height: auto;
}

li.square{
width: 25%;
float: left;
}

javascript:

$(document).ready(function() {  
 var width = $('.square').width();
  $('.square').css('height', width);
});

score 3 · Accepted Answer

JavaScript 不应该与响应式设计相关。如果您希望您的设计具有响应性，您可以使用媒体查询，或者根据您希望支持的浏览器，您还可以使用Viewport-Percentage Lengths。

视口百分比长度允许您在 CSS 中相对于视口缩放元素。有 4 个相关单位：（vw视口宽度）、vh（视口高度）、vmin（最小屏幕长度）和vmax（最大长度）。如果你想制作一个可以缩放的正方形，你可以使用vminor vmax：

.square {
    display:inline-block;   /* To override the list styling */
    height:20vmin;
    width:20vmin;
}

在指定20vmin时，这些li元素现在将缩放到最小屏幕长度大小的 20%。如果您的视口分辨率为 1000x500（1000 像素宽度，500 像素高度），20vmin则等于高度的 20%（因为高度是较小的长度）。

1 回答 1