进行基于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); });

Answer 1

JavaScript不应与响应式设计相关。 如果您希望您的设计具有响应能力，则可以使用媒体查询，或者根据您希望支持的浏览器，也可以使用视口百分比长度。

视口百分比长度允许您在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（宽度为1000px，高度为500px），则20vmin等于高度的20％（因为高度是较小的长度）。

JSFiddle演示 。