javascript - 如何根据屏幕大小和 li 标签数量制作响应式列表

Question

我有一个页面将在全屏模式下显示。在这个页面中，有一个<ul>带有一些<li>标签的。它们将显示在一个屏幕上的 3 列中，无需滚动。

默认情况下，<li>标签数量为 1 - 20，但有时为 20 - 24。

我需要让它们根据屏幕宽度和 li 标签的数量做出响应，但我不知道该怎么做。我认为我的问题是如何更改<li>.

我认为我必须使用 javascript 来处理这个问题。

#list {
  margin: 3% 0 0 2%;
}

#list li {
  width: 30%;
  display: inline-block;
  padding: 3% 2% 3% 0;
  font-size: 4.375vw;
  line-height: 1.5em;
  border-bottom: 1px #BABABA solid;
}

#list li div.ph_img {
  float: left;
  margin: 0px 3% 0px 0px;
  width: 30%;
}

#list li div.ph_img img {
  width: 100%;
}

#list li span.position {
  display: block;
  padding: 0px;
  font-size: 1.4vw;
  font-weight: bold;
  line-height: 1.3em;
  margin: 0px;
}

#list li span.name {
  display: block;
  padding: 0px;
  font-size: 2vw;
  font-weight: bold;
  line-height: 1.3em;
  margin: 0px;
}

#list li span.floor {
  display: block;
  padding: 0px;
  font-size: 1.2vw;
  font-weight: normal;
  line-height: 1.3em;
  margin: 0px;
}

#list li span.floor em {
  color: #FF0000;
  font-style: normal;
  padding-left: 3%;
}

#list li span.green {
  float: right;
  width: 67%;
  background-color: #00923A;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
}

#list li span.red {
  float: right;
  width: 67%;
  background-color: #FF0000;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
}

<ul id="list">
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxx" alt=""></div>
    <span class="position">something 1</span>
    <span class="name">something 1</span>
    <span class="floor">something 1</span>
    <span class="status green" device-id="Z001">something 1</span>
  </li>
<ul>

请帮我解决这个问题！

标签： javascriptjqueryhtmlcss