HTML & CSS 响应式网格问题，使用浏览器检查工具时缩放完美，窗口化不缩放

Question

我正在尝试创建一个设计，其中三个大小相等的正方形彼此相邻。

我想要的是在分辨率高于 991px 宽度的屏幕上有 3 个相邻的方块。

如果用户屏幕宽度低于 991px 且高于 767px，我希望他或她每行看到两个方块：

当用户屏幕分辨率低于 767px 时，我希望他或她每行看到一张图片。

到目前为止我已经完成了。因为我的结果是：

900px 屏幕宽度以上

767px 屏幕宽度以上

屏幕宽度小于 767px

现在我的问题开始了。 我已经使用 FireFox 检查工具对此进行了测试。缩放屏幕分辨率并调整我的 HTML & CSS 代码。而且看起来很完美。

但是，当我尝试在窗口浏览器屏幕中检查我的结果时，缩放突然关闭了。我几乎立刻就有了两个并排的屏幕。但是右边是一片空地。正如您在以下屏幕上看到的那样：

我的代码： HTML

         <section class="home-grid">
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #1</h5>
            </div>
        </div>
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #2</h5>
            </div>
        </div>
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #3</h5>
            </div>
        </div>
     </section>

CSS

    .home-grid {
    background-color: #0f0f0f;
    display: inline-block;
    padding: 0px;
    }
    .grid-house {
        display: block;
        width: 33.02vw;
        height: 33.02vw;
    }
    .grid-house .house-grid-content {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        height: 100%;
        padding-left: 20%;
        padding-right: 20%;
        position: relative;
        z-index: 999;
    }
    @media only screen and (max-width: 991px) {
        .grid-house {
            width: 50vw;
            height: 50vw;
        }
    }
    @media only screen and (max-width: 767px) {
        .grid-house {
            width: 100vw;
            height: 100vw;
        }
    }

编辑： 我用视口元标记设置了头部。

Solution by tacoshy, many thanks for that

Answer 1

让我感到困惑的是，你说的是 Grid 但实际上从未使用过网格 inline-block。恕我直言，使用实际的 CSS-Grid 或 Flexbox 会更容易。

对于机器人，CSS-Grid 和 Flexbox 我删除了 .grid-house 的 CSS。特别是将硬编码的高度和宽度设置为正方形是无效的。使用 aspect-ratio-属性或 this methode.

更容易

使用CSS-Grid

在这个方法中，我使用 display-grid 作为容器，并使用 `grid-template-columns 应用 3 列：repeat(3, 1fr);将 space （作为 1 个分数）平均分配给每一列。在 medi 查询中，我以相同的方式将列设置为 2 列或 1 列。

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-house {
  aspect-ratio: 1 / 1;
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .home-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<section class="home-grid">
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #1</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #2</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #3</h5>
    </div>
  </div>
</section>

使用 Flexbox：

只需在容器上使用 display: flex; 并将其与 flex-wrap: wrap 组合。然后将 .grid-house 的宽度设置为 calc(100% / 3) （为了像素精度）或 50% 或 100% 比 vw/vh 更有用，因为它需要容器宽度而不是屏幕宽度。使用 vw 是导致讨厌的 oevrflow 和问题的原因。

.home-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-house {
  aspect-ratio: 1 / 1;
  width: calc(100% / 3);
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .grid-house {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  .grid-house {
    width: 100%;
  }
}


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<section class="home-grid">
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #1</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #2</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #3</h5>
    </div>
  </div>
</section>

HTML & CSS 响应式网格问题，使用浏览器检查工具时缩放完美，窗口化不缩放

HTML & CSS responsive grid problem, scales perfect when using the browser inspection tool, windowed does not scale

html

css

responsive-design