css - 修复 div 上的文本

Question

我正在创建一个网站，当我在 Mac 上调整窗口大小时 (1270px)，我看到我的文字位于合适的位置(见图)。

但是当我在大屏幕上调整窗口大小时，文本会变低(见图)。

我在使用 Wordpress，所以我无法做任何我想做的事..

这是我的 CSS:

@media all and (max-width: 980px){
    .header-notre-vision:before, .header-notre-vision:after{
        display: none;
    }

    ul.ul-orange-notre-vision{
        padding: 0 !important;
        margin-top: 0;
    }
}

@media all and (max-width: 1300px) {
  .header-content {
    h1 {
      margin-top: 30px;
    }
  }

  #section-notre-vision:before{
    content: "UNE OFFRE QUI MODERNISE ET AMÉLIORE VOTRE RELATION CLIENT.";
    text-transform: uppercase;
    position: relative;
    font-size: 1.4em;
    font-weight: bold;
    margin: 30px auto 0 auto !important;
  }

  ul.ul-orange-notre-vision{
    padding: 0 !important;
    margin-top: 110px;

    li.li-orange-notre-vision{
      line-height: 3px;

      h4{
        strong{
          font-size: 15px;
        }
    }

// Icône "check"
  &:after{
        font-family: FontAwesome;
        font-size: 25px;
        content: "\f05d";
        position: relative;
        left: 170px;
        bottom: 19px;
      }
    }
  }
}

@media all and (max-width: 980px) {
  .header-content {
    h1 {
      margin-top: 30px;
    }
  }

  .wrap-orange-notre-vision{
    text-align: center;
    margin-top: 0;
    ul{
        margin-top: 36px !important;
    }
  }
}

麦克:

大屏幕:

你知道如何确保文本不会下降吗？

Answer 1

一般来说，对于响应式设计，使用百分比值而不是像素值可以很好地处理与容器相关的距离。

例如你有这个规则:

 ul.ul-orange-notre-vision{
    padding: 0 !important;
    margin-top: 110px;

现在我不知道该列表的父元素有多高，但是您可以尝试编写类似 margin-top: 的内容，而不是使用 margin-top: 110px; 20%;(尝试调整该值，直到它满足您的需要)- 这将在所有尺寸中保持相同的关系。

但是，如果像本例中那样对垂直距离使用百分比值，则父元素还必须具有已定义的 height 设置 - 要么是像素值，要么是百分比值，这又是要求父级父级也有定义的 height 值等等，直到 body 元素或 height 的像素值。