CSS 列响应式设计

Question

我有一个侧边栏需要根据视口进行响应。这是它的样子

我想知道是否有一种方法可以编写一段代码和一些 css 而不必为每个设备编写不同的 html。

这是我目前为桌面视图编写的内容

<div class="mycontainer">
    <div>
        <p>A</p>
        <p>B</p>
    </div>
        <div>C</div>
        <div>D</div>
    </div>
    <div>E</div>
    <div>F</div>
    <div>
        <p>G</p>
        <p>H</p>
    </div>
</div>

css:

.mycontainer{
  width:194px; 
  height:291px; 
  border-radius: 8px; 
  box-shadow: 0px 3px 6px #00000029; 
  margin-left: 30px;
  background: #FFF; 
  z-index:100;
}
.mycontainer div{
  border-bottom:  1px solid #E5E5E5;
  text-align: center;
}

.mycontainer div:first-child, .mycontainer div:nth-child(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.mycontainer div:nth-child(3), .mycontainer div:nth-child(4){
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
.mycontainer div:nth-child(5){
  border:  none;
}

如有任何帮助，我们将不胜感激

Answer 1

其中一种方法是使用媒体查询和 css 网格

.mycontainer{
  width:194px; 
  height:291px; 
  border-radius: 8px; 
  box-shadow: 0px 3px 6px #00000029; 
  margin-left: 30px;
  background: #FFF; 
  z-index:100;
  display: grid;
  justify-items: center;
  align-items: center;
}
.ef {
  justify-self: left;
}
@media (max-width:801px) { 
  .mycontainer{
    grid-template-columns: auto auto;
  }
  .ab, .cd, .ef, .gh {
    display: flex;
  }
  .ef {
    justify-self: center;
  }
}
@media (max-width:481px)  { 
  .mycontainer{
    grid-template-columns: auto auto;
  }
  .ab {
    display: grid;
  }
  .cd, .gh {
    display: flex;
  }
  .ef {
    justify-self: center;
    grid-area: 2 / 1 / 3 / 3;
  }
  .gh {
     grid-area: 3 / 1 / 4 / 3;
  }
}

<div class="mycontainer">
    <div class="ab">
      <p>A</p>
      <p>B</p>
    </div>
    <div class="cd">
      <div>C</div>
      <div>D</div>
    </div>
    <div class="ef">
      <div>E</div>
      <div>F</div>
    </div>
    <div class="gh">
      <p>G</p>
      <p>H</p>
    </div>
</div>

CSS 列响应式设计

CSS column responsive design

html

css

flexbox

responsive-design