Firefox 中不一致的响应式布局行为。刷新后调整大小答案

【问题标题】：Inconsistent responsive layout behaviour in Firefox. Resizes after refreshFirefox 中不一致的响应式布局行为。刷新后调整大小
【发布时间】：2021-11-02 09:49:15
【问题描述】：

问题 - 我的 .container 用于 <main> 和 <footer> 元素在从移动布局移动到桌面布局时不会调整回 100%。适用于 <header> 元素，并且在从桌面布局移动到移动布局时也可以正确缩放。

预期结果 - .container 可以正确缩放 <main> 和 <footer>。目前它会在刷新后重新缩放。

这是行为

这里的代码sn-p

body {
    width: 100%;
    background-color: #eaeaea;
}

header,
main,
footer {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100vw - 50px);
  border: 1px solid black;
}

.logo {
    font-weight: 700;
}

.submission {
    margin-left: auto;
    color: white;
    background-color: #1e272e;
    padding: 1rem;
    text-decoration: none;
    border-radius: 2px;
    font-weight: 700;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  border: 1px solid red;
}

.gallery img,
.gallery video {
    width: 100%;
}

.gallery__item {
    position: relative;
}


@media screen and (min-width: 800px) {
    .container {
        width: calc(100vw - 100px);
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">Logo</div>
      <a class="submission" href="">Submit</a>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="gallery">
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />          
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
        <div class="gallery__item">
          <img class="gallery__item-image" src="https://www.fillmurray.com/640/360" />
        </div>
      </div>
    </div>
  </main>
  
  <footer>
    <div class="container">
      <form class="footer__form">
        <h2>Learn moe</h2>
        <h3>Join newsletter</h3>
        <input type="text" class="footer__input" placeholder="Enter your email address" />
      </form>

      <p>© 2021 Comapny</p>
    </div>
  </footer>

</body>
</html>

其他信息

在 Firefox 开发者版上运行

是什么导致了这种行为？它是特定于浏览器的吗？

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

我检查了是否在 .container 类中将 vw 更改为 % ，然后它可以正常工作。我想它在某个地方是冲突的。 Firefox v. 91.0.2

Microsoft Edge 93.0.961.38 - 与 vw 和 % 一起正常工作
Google Chrome 93.0.4577.63 - 与 vw 和 % 一起正常工作

解决方案

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 50px); /* changed */
  border: 1px solid black;
}
@media screen and (min-width: 800px) {
  .container {
    width: calc(100% - 100px); /* changed */
  }
}

body {
  width: 100%;
  background-color: #eaeaea;
}

header,
main,
footer {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 50px);
  border: 1px solid black;
}

.logo {
  font-weight: 700;
}

.submission {
  margin-left: auto;
  color: white;
  background-color: #1e272e;
  padding: 1rem;
  text-decoration: none;
  border-radius: 2px;
  font-weight: 700;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  border: 1px solid red;
}

.gallery img,
.gallery video {
  width: 100%;
}

.gallery__item {
  position: relative;
}

@media screen and (min-width: 800px) {
  .container {
    width: calc(100% - 100px);
  }

  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

<header>
      <div class="container">
        <div class="logo">Logo</div>
        <a class="submission" href="">Submit</a>
      </div>
    </header>

    <main>
      <div class="container">
        <div class="gallery">
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
          <div class="gallery__item">
            <img
              class="gallery__item-image"
              src="https://www.fillmurray.com/640/360"
            />
          </div>
        </div>
      </div>
    </main>

    <footer>
      <div class="container">
        <form class="footer__form">
          <h2>Learn moe</h2>
          <h3>Join newsletter</h3>
          <input
            type="text"
            class="footer__input"
            placeholder="Enter your email address"
          />
        </form>

        <p>© 2021 Comapny</p>
      </div>
    </footer>

【讨论】：