截面元素是否无法将尺寸/保持格式调整为不同的屏幕尺寸？

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可能并没有您期望的效果，并且如果我没记错的话，通常也不是您想要的。 如果需要将body声明为位置父对象，我建议使用position: relative代替，但是考虑到body仍然是文档的最终父对象之一，所有东西都已经相对于其位置了。
• 你也将position: absolute给你的section元素，但与body未指定任何位置（ top|right|bottom|left ）。 因为你有body设置absolute是成为部分absolute会坚持body很少考虑到页面上的其他对象，从而导致你可能不希望影响。 您可能对position和float之间的关系感到困惑，实际上这根本不是一个真正的问题。
• 您正在浮动的元素也被设置为100％的宽度，这可能并没有达到您所期望的效果，并且实际上只会导致这些容器的所有内容几乎表现出好像不在容器中一样容器。 浮动对象通常应用于比父对象窄的对象，从而使它们导致其他嵌入式对象或浮动对象环绕它们。

您可以考虑修改对“响应式”一词的解释。 我可以争辩说，您拥有的是响应式的，因为东西响应屏幕的大小。 看起来不是很好。 您可以通过多种方式实现响应，您只需要知道在较小的屏幕上要使用的布局，并弄清楚如何更改一种屏幕尺寸的样式即可获得其他屏幕所需的布局。

Answer 3

1. 请从身体上移开绝对位置

   @media屏幕和（最大宽度：478px）{body {位置：绝对； }
   }

2.plz移除位置：绝对位置

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

3，在@media屏幕上（最大宽度：740px），将section.kppr添加到float：none; ＆margin-top：-6％;。 （-6％？）

4.在@media屏幕和（最大宽度：740px）， section.twgb ， section.descript ＆ section.discount中添加float：none; ＆text-align：center; 。

5.在@media屏幕和（最大宽度：740px）中，将此代码添加到

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

对不起，英语不好:(