如何根据屏幕尺寸和li标签数量制作响应列表

Question

我有一个页面，它将以全屏模式显示。在此页面中，<ul>带有一些<li>标签。它们将在不滚动的情况下以三栏显示在一个屏幕上。

在默认情况下，<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>

请帮我解决这个问题！