使用margin-top等调整响应式css div的大小

Question

大家好，美好的一天！

任何人都可以就如何完成我的css代码提出一些建议，请参阅下面的代码。 当我为响应目的而调整浏览器大小时的当前状态。

         <div style="width:100%; height:auto; position:relative;">
           <div style="min-width:300px; height:500px; float:left; background-color:orange;">
               <!-- some content here -->
           </div>
           <div style="min-width:300px; height:200px; float:left; margin-top:300px; background-color:green;">
               <!-- some content here -->
           </div>
          </div>

该代码的输出有一个很大的距离，我把它放在css margin-top：300px; 当我调整浏览器的大小到最小尺寸。

是可以解决???

Answer 1

您可以使用媒体查询。

@media screen and (max-width:450px)
{
  .divID{
           //code goes in here
           margin-top:50px;
   }

}

所以在这里，当屏幕宽度为450px或更450px ， margin-top将减少到50px 。

我建议使用%或em而不是px单位。 因为%或em有助于根据可用的屏幕宽度调整元素width或height 。 pixel不会这样做。

以下是使用媒体查询的一些参考。 参考

Answer 2

您可以考虑使用框架。

在这种情况下：使用媒体查询。 看看

Answer 3

如果我不明白你想要下一个错误：当你调整浏览器的大小时，边距顶部将是30px（例子）

你可以使用媒体查询

像这样：

<div style="width:100%; height:auto; position:relative;">
           <div style="min-width:300px; height:500px; float:left; background-color:orange;">
               <!-- some content here -->
           </div>
           <div id="div2" style="min-width:300px; height:200px; float:left; margin-top:300px; background-color:green;">
               <!-- some content here -->
           </div>
          </div>

CSS代码：

@media (max-width: 300px) {
#div2{
margin-top:30px;
}
}

你也应该使用CSS文件而不是在html中编写样式