部分元素不是 resizing/keeping 格式以适应不同的屏幕尺寸？

Question

我这辈子都无法让这些部分元素响应。我真的不知道我做错了什么。我认为这可能与我的媒体查询有关。

有什么想法吗？或者也许我只是不知道自己在做什么，而我以为自己在做什么。很有可能！

<style>
 section.kppr{
      width: 100%;
      text-align: center;
      margin: -6% 0 0 0;
      float: center;
    }
  
   .kppr p{
      font-size: 420%;
      color: #89d4e8;
      font-weight: bold;
    }
  
  .kppr img{
       max-width: 100%;
     height: auto;
     width: auto;
  }
  
   .twgb{
      width: 14%;
      float: left;
      text-align: center;
      margin: 0 0 0 20%;
    }
  
  .twgb p{
   line-height: 120%;
    font-weight: bold;
    padding: 4% 0 0 0;
    font-size: 115%;
    letter-spacing: 1px;
  }
  
  .descript{
     text-align: left;
  }
  
  .descript p{
     line-height: 120%;
      color: black;
      font-weight: bold;
      padding: 1% 0 0 0;
    
  }
  
  .discount img{
   float: left;
    padding: 0 1%;
    max-width: 100%;
    height: auto;
    width: auto;
  }
  
  /*--------------------MEDIA!!!---------------*/
  @media screen and (max-width: 478px){
        body{
            position: absolute;
        }   
    }
  
   @media screen and (max-width: 740px){
     section{
      position: absolute;
     }
     section.kppr{
          float: left;
          width: 100%;
          margin: 0;
          padding: 0;
        }
     
     section.twgb{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
     
     section.descript{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
  
     section.discount{
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
     }
   }
  
</style>

<section class="kppr">
 <p>kids play <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="kids play parents relax" /> parents relax</p>
</section>

<section class="twgb">
  <p><font color="#000">together we</font><br><font color="#89d4e8" size="6%">give back</font></p>
</section>

<section class="discount">
 <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759f17507eaa0ecb82b3677/1465512309355/STL-Home-5.png" alt="5% given back" />
</section>

<section class="descript">
 <p> of every dollar goes back to helping children <br>in foster care find safe and loving homes.</p>
</section>

Answer 1

所以你已经在你的 CSS 中使用了百分比，所以删除你所有的@media CSS 并告诉我你觉得如何。

Answer 2

在我看来这里有很多错误。如此之多，以至于您可能需要更具体地说明您要实现什么 "responsiveness"，这是一个模糊的术语，而不是对特定行为的描述。我可以给你一些提示，至少可以突出你可能感到困惑的地方。

float 没有 center 值。幸运的是设置它可能不会造成任何问题。
在 body 上使用 position: absolute 可能不会产生您期望的效果，如果我没记错的话，通常您也不想这样做。如果将 body 声明为位置父项是必要的，我建议改用 position: relative，但考虑到 body 无论如何都是文档的最终父项之一，所有内容都已经相对于它定位。
您还将 position: absolute 应用于 section 元素，但与 body 一样，您没有指定任何位置 (top|right|bottom|left)。因为您已将 body 设置为 absolute，所以变为 absolute 的部分将遵守 body，而很少考虑页面上的其他对象，从而产生您可能没有的效果希望。您可能会对 position 和 float 之间的关系感到困惑，而实际上这根本不是一个关系。
您浮动的元素也被设置为 100% 宽度，这可能不会产生您期望的效果，实际上只会导致这些容器的所有内容表现得几乎就像它们根本不在容器中。浮动通常应用于比父对象窄的对象，允许它们导致其他内联或浮动对象环绕它们。

您可能会考虑修改您对术语 "responsive" 的解释。我可以争辩说你所拥有的是响应式的，因为东西会响应屏幕的大小；它只是看起来不太好。您可以通过多种方式实现响应能力，您只需要知道在较小的屏幕上您想要的布局，并弄清楚如何更改您对一种屏幕尺寸的样式以实现您想要的其他屏幕布局。

Answer 3

请从 body
中删除 position:absolute
@media 屏幕和 (max-width: 478px){ body{ 位置：绝对； }
}

2.plz 从

部分删除 position:absolute

  @media screen and (max-width: 740px){
         section{
            position: absolute;
         }
}

3.in @media screen and (max-width: 740px), 添加 section.kppr float:none; & margin-top:-6%;. （-6%？）

4.in @media screen and (max-width: 740px), section.twgb, section.descript & section.discount 到添加 float:none； & text-align：中心； .

5.in @media screen and (max-width: 740px)，将此代码添加到

**section.discount img**{
         float:none;
         }

抱歉英语不好:(

部分元素不是 resizing/keeping 格式以适应不同的屏幕尺寸？

Section elements not resizing/keeping format to different screen sizes?

html

css

media-queries