Html 使用边距顶部等调整响应css div的大小

大家好，祝大家好

任何人都可以提供一些建议，如何做我的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；当我将浏览器调整到最小尺寸时

---

这是否可以解决？？？。

您可以使用媒体查询

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

}

因此，在这里，当屏幕宽度小于等于

450px

时，

页边距顶部将减小到
50px

我建议使用
%
或
em
而不是
px
单元。因为
%
或
em
有助于根据可用屏幕宽度调整元素
宽度
或
高度<代码>像素
不执行此操作

下面是一些使用媒体查询的参考资料
 >你可以考虑使用框架。

在这种情况下：使用媒体查询。有一个如果我不理解错了，你想要下一个：当你调整浏览器大小时，页边空白顶部将是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文件而不是在html中编写样式
使用
%
而不是
px
@VitorinoFernandes，输出仍然相同，我将边距放在顶部：80%；还有其他解决方案吗？如果我把浏览器的大小调整到300px；宽度，将生效，但仅当我在浏览器中达到大小的数量，并且如果我仍然没有问题。还有其他解决方案吗？你到底想做什么？这会给我的div上面更多的空间：（@JuanTamad你尝试了什么？如果可以的话，发布代码。
@media (max-width: 300px) {
#div2{
margin-top:30px;
}
}