[英]Section elements not resizing/keeping format to different screen sizes?
For the life of me I cannot get these section elements to be responsive. 对于我的一生,我无法使这些部分元素具有响应性。 I don't really know what I'm doing wrong.
我真的不知道我在做什么错。 I think it may have to do with my media queries.
我认为这可能与我的媒体查询有关。
Any ideas? 有任何想法吗? Or maybe I just have no idea what I'm doing when I thought I did.
或者,也许我只是不知道自己以为自己在做什么。 Quite possible!
很有可能!
<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>
因此,您已经在CSS中使用了百分比,因此请删除所有@media CSS,并告诉我它的外观。
There's quite a lot wrong here, it seems to me. 在我看来,这里有很多错误。 So much so that you might need to be considerably more specific about what you what to achieve regarding "responsiveness", which is a vague term rather than a description of a specific behaviour.
如此之多,以至于您可能需要更加具体地说明要实现的“响应性”,这是一个模糊的术语,而不是对特定行为的描述。 I can give you a few tips that will at least highlight where you might be confused.
我可以给您一些提示,至少可以强调您可能会感到困惑的地方。
float
has no center
value. float
没有center
值。 Fortunately setting it probably won't cause any problems. position: absolute
on body
likely isn't having the effect you're expecting, and typically isn't something you'd want to do, if I'm not mistaken. position: absolute
的body
可能并没有您期望的效果,并且如果我没记错的话,通常也不是您想要的。 If declaring body
as a positional parent was necessary I'd suggest using position: relative
instead, but given that body is one of the ultimate parents of the document anyway, everything will already be position relative to it. body
声明为位置父对象,我建议使用position: relative
代替,但是考虑到body仍然是文档的最终父对象之一,所有东西都已经相对于其位置了。 position: absolute
to your section
elements, but as with body
you haven't specified any positions ( top|right|bottom|left
). position: absolute
给你的section
元素,但与body
未指定任何位置( top|right|bottom|left
)。 Because you've got body
set to absolute
the sections that become absolute
will adhere to body
with little regard to the other objects on the page, causing effects you probably weren't hoping for. body
设置absolute
是成为部分absolute
会坚持body
很少考虑到页面上的其他对象,从而导致你可能不希望影响。 You might be confused about the relationship between position
and float
, where in fact that isn't really one at all. position
和float
之间的关系感到困惑,实际上这根本不是一个真正的问题。 You might consider revising your interpretation of the term "responsive". 您可以考虑修改对“响应式”一词的解释。 I could argue that what you have is responsive because stuff responds to the size of the screen;
我可以争辩说,您拥有的是响应式的,因为东西响应屏幕的大小。 it just doesn't look very good.
看起来不是很好。 You could achieve responsiveness in a wide variety of ways, you just need to know what layout you're after on smaller screens, and figure out how to change the styles you have for one size of screen to achieve the layout you want for others.
您可以通过多种方式实现响应,您只需要知道在较小的屏幕上要使用的布局,并弄清楚如何更改一种屏幕尺寸的样式即可获得其他屏幕所需的布局。
plz remove position:absolute from body 请从身体上移开绝对位置
@media screen and (max-width: 478px){ body{ position: absolute; @media屏幕和(最大宽度:478px){body {位置:绝对; }
}
} }
2.plz remove position:absolute from section 2.plz移除位置:绝对位置
@media screen and (max-width: 740px){
section{
position: absolute;
}
}
3.in @media screen and (max-width: 740px), add section.kppr to float:none; 3,在@media屏幕上(最大宽度:740px),将section.kppr添加到float:none; & margin-top:-6%;.
&margin-top:-6%;。 (-6% ?)
(-6%?)
4.in @media screen and (max-width: 740px), section.twgb , section.descript & section.discount to add float:none; 4.在@media屏幕和(最大宽度:740px), section.twgb , section.descript & section.discount中添加float:none; & text-align:center;
&text-align:center; .
。
5.in @media screen and (max-width: 740px), add this code to 5.在@media屏幕和(最大宽度:740px)中,将此代码添加到
**section.discount img**{
float:none;
}
sorry for bad English :( 对不起,英语不好:(
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.