html - 如何使此部分响应

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%; 这样的百分比或者像我在下面所做的那样(相对于 View 高度和 View 宽度)...

下面是代码示例

.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>