如何制作窗口大小折叠的框的CSS列表？

Question

我在CSS方面不是很好，所以我甚至不知道从哪里开始......但是我需要快速制作一个对象列表，它将连续显示4个对象（以及对象所需的行数）但是，默认情况下，当窗口大小较小时，4个对象不适合，它们会自动重新排列为每行2个...

有没有人有CSS代码的链接，实现了这一点？我甚至不知道它是如何调用的，所以我不知道该搜索什么...

谢谢！

CSS

#welcomemessage {
position: relative;
top: 5px;
left: 10px;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 340px;
padding-left: 50px;
z-index: 1;

}

#maincontent {
position: relative;
display: block;
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0);
max-width: 700px;
padding-left: 50px;
z-index: 1;
}

.appbox {
position: relative;
background-color: rgba(200, 200, 200, 0.6);
width: 120px;
height: 120px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
margin-right: 25px;
margin-bottom: 25px;
float: left;
}

HTML

   <div id='welcomemessage'>
         Welcome to InfraNodus, <%= user.name %>. 
     Using this platform you can convert any text into network. 
    Try out our apps to see how it works.
     </div>

    <div id='maincontent'>
        &nbsp;<br>&nbsp;<br>
      <div class="appbox">Here we go</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>
      <div class="appbox">Here we go again</div>



    </div>

Answer 1

你必须使用css media queries

ul{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
li{
  float: left;
  width: 22%;
  margin: 0 2% 10px 0;
  padding: 30px 0;
  border: 1px solid #000;
  text-align: center;
}

@media (max-width: 640px) {
  li{
    width: 47%;
  }
}

<ul>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
  <li>This is a bloc</li>
</ul>