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或更短时，margin-top将缩减为50px。

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

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

Answer 2

您可以考虑使用框架。

在这种情况下：使用媒体查询。有一个look

Answer 3

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

您可以使用media query

像这样：

<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中编写样式

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

3 个答案: