响应式网站设计与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-values.始终使用%-values.

您可以使用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/