截面元素是否無法將尺寸/保持格式調整為不同的屏幕尺寸？

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;
         }

對不起，英語不好:(