html - 与网格系统的比例错误

Question

我正在尝试构建一个响应式网站，但遇到了这个问题:我将网格系统应用到 div 但我得到的比例不正确，如下图所示:

在 320 像素的视口(viewport)宽度中:

在设备工具栏中也有 320px:

我想知道这种行为背后的原因。我认为这与视口(viewport)宽度有关？？提前谢谢你

这是我的代码:

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 范围。它是单词“Well”和拉伸(stretch)跨度结束之间的剩余空间。

网格布局内的任何元素都将被拉伸(stretch)以覆盖其所在的整个网格区域，因此如果您希望元素在该区域内具有某种对齐方式，则必须使用包装器，或者如果只是文本，则对齐它。

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