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的快速方法吗？像这些div中的45个一样编辑将需要永远。我真的很陌生，任何帮助都将受到赞赏。

Answer 1

要使其响应，您不得使用px - 值。始终使用% - 值。

您可以使用此类http://rqrwd.com/之类的工具将px计算为％-values。

然而，我不明白为什么你需要这么多的绝对定位。在responsive-desgin中，容器应该“浮动” - 绝对定位（即使使用％-values）也是不可能的。

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/

响应式网站设计与css绝对定位

1 个答案: