html - 具有CSS绝对定位的响应式网站设计

Question

我如何将此 CSS 制作成响应式网站？我想我必须使用。

   @media (min-width: 700px) and (max-width: 1150px) {

    #div{position:absolute;left:149px;top:61px;}

    #div2{position:absolute;left:249px;top:81px;}
   #div2{position:absolute;left:249px;top:81px;}
   #div3{position:absolute;left:279px;top:181px;}
   #div4{position:absolute;left:449px;top:121px;}
    } 

但是有很多 div 有什么快速的方法可以做到这一点吗？编辑 45 个这样的 div 将花费很长时间。我对此很陌生，我们将不胜感激。

Answer 1

要使其响应，您不得使用 px -值(value)观。始终使用 % -取而代之。

您可以使用像这样的工具 http://rqrwd.com/将 px 计算为 % 值。

不过，我不明白你为什么需要这么多绝对定位。在响应式设计中，容器应该“ float ”- 绝对定位(即使使用 % 值)使之成为不可能。

but there are alot of divs any fast way to do this?

您不必为每个 div 编写设计。此外，我认为你的语法 #div并不理想 - div2 和 div3 具有完全相同的布局 - 请改用类!

将 css 样式应用于所有 div:

div {
   width: 40%
}

将语法仅应用于一个容器:

HTML:<div id='unique'>content</div>

#unique {
   width: 40%
}

将语法应用于多个容器(但不是全部):

HTML:<div class='flat'>content</div><div class='flat'>content</div>

.flat {
   width: 40%
}

或

#div2, #div3, .flat {
   width: 40%
}

您或许应该看看这个简短的 css 介绍:http://www.cssbasics.com/introduction-to-css/