CSS 响应式标记部分

Question

为了提高我的 css 技能，我创建了一个小型网站，其想法是在创建响应式网站时获得最佳实践。以下简单的 HTML 标记：

      <section class="bg-image">
        <img src="https://placehold.it/1606x1189"  alt="imagem"/>

        <div class="title">
            <h2>I'm Title, <br />Sub Title</h2>
            <button class="button-type-1">Click Me 1</button>
        </div>

       <div class="box">
           <p class=".box-type-1">
           There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.</p>
           <p class=".box-type-2">
           There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.</p>
             <br />
           <button class="button-type-2">Click Me 2</button>
           <button class="button-type-3">Click Me 3</button>
       </div>
    </section>

我是为了响应而创建的..

当我放大和缩小标题 div 和框 div 时，它们只是从不同方向上的视口离开。

.image{
  position: relative;
  max-width: 100%;
  height: 1189px;
  width: 1606px;
  opacity: 0.75;
}

.title h2 {
  position: absolute;
  color: rgb(37, 37, 78);
  padding: 10px;
  top:132px;
  left:32%;
  font-size: 80px;
  letter-spacing: -0.1px;   
  line-height: 70px;    
 }

.title .button-type-1 {
  position: absolute;
  background-color: rgb(177, 166, 9);
  height: 48px;
  width: 265px;
  border: 1px solid #FFFFFF;
  border-radius: 34px;
  left:43%;
  top: 33%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}

.box {
    position: absolute;
    left:150px;
    top: 550px;
    height: 270px;
    width: 60%;
    left:23%;
    border-radius: 4px;
    background-color: #FFFFFF;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.08);
}

.box .box-type-1 {
    height: 26px;
    width: 315px;
    color: #1E1C1A;
    font-family: ".SF NS Display";
    font-size: 25px;
    line-height: 26px;
}

.box .box-type-2 {
    height: 56px;
    width: 1017px;
    color: #535355;
    font-family: ".SF NS Display";
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

.button-type-2 {    
    height: 48px;   
    width: 224px;   
    border-radius: 34px;    
    background-color: #3d8b49;  
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}

.button-type-3 {    height: 48px;   width: 209px;   border-radius: 34px;    
    background-color: #B8455a;  
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
}

那么当我放大 div 标签内容时，我该如何解决这个问题？

在创建响应式应用程序时我应该考虑的最佳做法是什么。

Answer 1

使用 flexbox 使网站具有响应性。here is the link