使用页边空白等调整响应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边距放在上面：300px；当我调整浏览器的大小到最小的时候。

这有可能解决吗？？？。。

Answer 1

您可以使用媒体查询。

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

因此，在这里，当屏幕宽度为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 中编写样式