Question

所以我有一个，每个李是一个正方形。现在，css中的

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

但是，在调整大小时，只会影响宽度，高度会保持原始的on-load-value。无论如何要绕过这个？

这是我的代码：

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);
});

Answer 1

JavaScript不应与响应式设计相关。如果您希望自己的设计具有响应性，则可以使用Media Queries，或者根据您希望支持的浏览器，您也可以使用Viewport-Percentage Lengths。

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

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

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