屏幕尺寸变化时堆叠元素的困难

Question

当屏幕尺寸较小时，我很难将我的 div 一个一个地堆叠在一起，然后在我达到 phone 尺寸时一个一个地堆叠起来。

我正在使用 Paravel 的 Foldy Grids，在完整的桌面尺寸上，有 3 个并排的 div，但我希望它并排缩小到 2 个，然后在 phone 上只有 1 个在彼此之上。但是，我感觉好像我将媒体查询应用于不正确的 <div>。任何指导将不胜感激。在 CSS 中，我放入 33% 的原因是由于在完整桌面模式下 div 被分成 3 个。

CSS:

@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
}

HTML:

<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

      </div>
    </section>
  </div>
</section>

Answer 1

我不确定 Paravel 的 Foldy Grids，因为我从来没有使用过它，也没有太多时间阅读文档，但是你可以通过在媒体查询上提供不同的大小来修复它，只要确保你的媒体查询需要在您的桌面代码下方。

目前，桌面上有 3 个项目，在像 iPad 这样的小屏幕上有 2 个项目，在 600px 以下的小屏幕上有一个项目。

.dashboardIconsMod {
    color: pink;
    border-style: solid; 
    border-color: red;
    width:33.33%;
}
* {box-sizing: border-box;}
.show-grid .row {display:flex; flex-wrap: wrap;}
@media screen and (max-width: 900px) {
  .dashboardIconsMod {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .dashboardIconsMod {
    width: 100%;
  }
}

<section id="content">
  <div class="container">
    <section id="grid" class="clearfix">
      <div class="cf show-grid">
        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 1st Div -->
            <p> 1st Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 2nd Div -->
            <p> 2nd Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 3rd Div -->
            <p> 3rd Grid </p>
          </div>
        </div>


        <div class="row">
          <div class="grid-2 dashboardIconsMod">
            <!-- 4th Div -->
            <p> 4th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 5th Div -->
            <p> 5th Grid </p>
          </div>

          <div class="grid-2 dashboardIconsMod">
            <!-- 6th Div -->
            <p> 6th Grid </p>
          </div>
        </div>

      </div>
    </section>
  </div>
</section>

屏幕尺寸变化时堆叠元素的困难

Difficulties in stacking elements with screen size changes

css

styling

media-queries