js优化问题

Question

有这样一个结构

<ul>
    许多的li
</ul>

在不改变结构的前提下，ul里面的li宽度百分比自适应，高度需要用js动态改变。有没有什么优化方案来为这些li设置高度？ 如果说用循环，是用for还是map或者其他的，哪个性能高？

Answer 1

你说高度随宽度变化？可以使用rem或者vw.
性能嘛，应该差不多，map里面也是循环.

Answer 2

与其等待别人的答案，不如自己试一遍。

Answer 3

我觉得这个完全是css能完成的啊，用css制作一个宽度和高度按比例缩放代码示例：

    <div style="background-color: rgb(204, 204, 204); max-width: 80%; height: 0px; overflow: hidden; margin-left: 10%; padding-bottom: 45%;"></div>  

**用max-width来让宽度自适应。
（因为设置为80%，所以用margin-left: 10%来让div居中显示）
这里真正的高度是由 padding-bottom来实现
（padding-bottom: 45%的宽高比例就是基于屏幕宽高100%的80%：45%）
所以本身的height就设置为0，并且溢出的部分隐藏：overflow: hidden;**
运行代码：http://c.runoob.com/iframe/151

我的博文：链接描述

Answer 4

//宽度自适应
<style>
    .list {
        display: flex;
    }
    .list > li {
        flex:1;
    }
</style>
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

至于高度的动态设置取决于你的策略，for跟each在数据不多的情况下性能差不到的