与网格系统的比例错误

Question

我正在尝试建立一个响应式网站，我遇到了这个问题：我正在将网格系统应用于div，但我的错误比例如下图所示：

在320px视口宽度中：

在具有320px的设备工具栏中：

我想知道这种行为背后的原因。我认为这对视口宽度有影响吗？并提前谢谢你

这是我的代码：

HTML：

<div class="blue-box">
 <p class="container-3"><span  data-aos="fade-right"  data-aos-duration="1800"
    class="word-bb-1">well </span><span
   class="word-bb-2"
    data-aos="fade-left"  data-aos-duration="2000">I think your first
  question</span>
  <span class="word-bb-3" data-aos="fade-right"   data-aos-duration="1500">is about Amine right</span>
  <span class="word-bb-mark" data-aos="fade-down-left"  data-aos-duration="2000">?!!!</span>
  <img src="../vector/murva 1.1.png" class="img-box" alt=""  data-aos="fade-down"
   data-aos-duration="1500">
</p>
</div>

CSS

  .blue-box {
    margin-top: 10vh;
    width: 100vw;
    height: 33vh;
    background-color: #33cccc;
  }

  .img-box {
    width: 40vw;
        position: relative;
        left: -7vw;  }

  .container-3 {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 16vh auto 3vh auto;
    color: #ffffcc;
    font-family: Roboto;
    grid-column-gap: 5vw;
  }

 .word-bb-1 {
   font-size: 10vh;
   font-weight: bold;
   text-transform: capitalize;
   margin-top: 5vh;
   margin-left: 10vw;
  }

  .word-bb-2 {
    margin-top: 8vh;
  }

  .word-bb-3 {
    font-size: 7vw;
    grid-column: 1/3;
    text-align: center;
    font-weight: bold;
  }

  .word-bb-mark {
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    grid-column: 1/3
  }

Answer 1

将text-align: right添加到你的.word-bb-1 span。它是单词“Well”和拉伸跨度结束之间的剩余空间。

网格布局中的任何元素都将被拉伸以覆盖其内部的整个网格区域，因此如果您希望元素在区域内部有一些对齐，则必须使用包装器，或者如果它只是文本，则对齐它。

.word-bb-1 {
   ...
   text-align: right;
}