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

这里有很多错误，在我看来。因此，您可能需要更加具体地了解您在响应性方面要达到的目标，这是一个含糊的术语，而不是对特定行为的描述。我可以给你一些提示，至少可以突出你可能会感到困惑的地方。

float没有center值。幸运的是设置它可能不会引起任何问题。
在position: absolute使用body可能不会产生您期望的效果，而且通常不是您想要做的事情，如果我和＃39;我没弄错。如果将body声明为位置父级是必要的，我建议使用position: relative代替，但鉴于该主体是文档的最终父级之一，所有内容都已经相对于它的位置
您还要将position: absolute应用于section个元素，但与body一样，您还没有指定任何职位（top|right|bottom|left）。由于您已将body设置为absolute，因此absolute的部分将遵守body，而不会考虑页面上的其他对象，从而导致您受到影响可能不是希望的。您可能会对position和float之间的关系感到困惑，实际上这根本就不存在。
您的浮动元素也被设置为100％宽度，这可能没有您期望的效果，实际上只会导致这些容器的所有内容表现得几乎就像他们根本不在容器中一样。浮动通常应用于比父级更窄的对象，允许它们使其他内联或浮动对象环绕它们。

您可以考虑修改您对术语＆＃34;响应＆＃34;的解释。我可以说你所拥有的是响应，因为东西响应屏幕的大小;它看起来并不是很好。您可以通过各种方式实现响应性，您只需要知道您在较小的屏幕上使用的布局，并找出如何更改一个屏幕尺寸的样式以实现您想要的布局其他

Answer 3

plz删除位置：绝对身体

@media screen and（max-width：478px）{ 身体{ 位置：绝对; }
}

2.plz删除位置：绝对距离

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

3.在@media屏幕和（max-width：740px）中，添加 section.kppr 浮动：无; ＆安培;边距：-6％;. （-6％？）

4.在@media屏幕和（max-width：740px）， section.twgb ， section.descript ＆amp; section.discount 来 add float：none; ＆安培;文本对齐：中心;

5.在@media屏幕和（max-width：740px）中，将此代码添加到

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

截面元素没有调整大小/保持不同屏幕尺寸的格式？

3 个答案: