Javascript 如何为UL elemeet设置响应性设计

我正在努力为ul元件设计具有自举功能的响应性设计

我的html格式如下：

<div class="col-lg-8 col-md-7 col-sm-4 col-xs-4">
    <div class='row'>
         <ul>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>  
         </ul>
    </div>
</div>

这些元素看起来很好，宽度很大

 ---   ---    ---    ---
|   | |   |  |   |  |   |
 ---   ---    ---    ---

但不是较小的宽度

 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --  

当我的li在更小的屏幕上时，我希望它的宽度更小，并且我希望我的li水平排列。你们能帮上忙吗？非常感谢

ul#my_list{
  width:100%;
}

#my_list li {
   width:300px;
   transition:ease-in-out 300ms all;
   display:inline-block;
   float:left; // dont forget to use a clearfix or similar method on the #my_list element
}


@media (max-width:320){
   #my_list li{
      width:150px;
      display:block;
   }
}

---

像这样的东西应该是你正在寻找的，希望我能帮助你，如果我没有解释清楚或是不符合标准，请随时让我知道

您应该尝试使用百分比进行响应性设计；看看这个例子，如果你在UL上玩宽度游戏，那么这表示屏幕宽度

---

你不能把你的li宽度设置成一个百分比吗？

ul#my_list{
  width:100%;
}

#my_list li {
   width:300px;
   transition:ease-in-out 300ms all;
   display:inline-block;
   float:left; // dont forget to use a clearfix or similar method on the #my_list element
}


@media (max-width:320){
   #my_list li{
      width:150px;
      display:block;
   }
}

ul {
    width: 500px; /* This could be the screen width (100%) */
    height: 50px;
    border: 2px solid #000;
    margin: 0;
    padding: 0;
}
.item{
    background-color:red;
    margin: 0 1%;
    width: 23%; /* less width to compensate for margin */ 
    height: 100%;
    float: left;
    list-style-type: none;
}