如何使此部分具有响应性

Question

大家好， 如何使此部分响应为768px

.AppleContent {
    background-color: #9ACD32;
    text-align: center;
    padding: 50px 200px;
    color: white;
}

<section class="section-1">
        <div class="AppleContent">
            <i class="fas fa-apple-alt fa-3x"></i>
            <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
            <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
        </div>
</section>

Answer 1

您已经给padding: 50px 200px;填充了绝对值...这就是为什么当您缩小尺寸时，内容看起来会消失的原因；

要获得所需的确切外观，请尝试为其提供相对值（而不是绝对值）。像padding: 5% 10%;或l这样的百分比已在下面完成（相对于视图高度和视图宽度）...

下面是代码示例

.AppleContent {
  background-color: #9ACD32;
  text-align: center;
  padding: 10vh 20vw;
  color: white;
}

<section class="section-1">
  <div class="AppleContent">
    <i class="fas fa-apple-alt fa-3x"></i>
    <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
    <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
  </div>
</section>