Html 具有 css 绝对定位的响应式网站设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21500200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
responsive website design with css absolute positioning
提问by bob12345
How would I make this css into a responsive website? I figured I have to use.
我如何将这个 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;}
}
But there are a lot of divs any fast way to do this?
Editing like 45 of these divs will take forever.
Im really new to this, any help will be appreciated.
但是有很多div方法可以做到这一点吗？像 45 个这样div的编辑将花费很长时间。我对此很陌生，任何帮助将不胜感激。
回答by maja
To make it responsive, you must not use px-values. Always use %-values instead.
要使其具有响应性，您不得使用px-values。始终使用%-values 代替。
You can use tools like this one http://rqrwd.com/to calculate px into %-values.
您可以使用像http://rqrwd.com/这样的工具将 px 计算为 %-values。
Nevertheless, I don't understand why you need so much absolute-positioning. In responsive-desgin, the container should 'float' - Absolute positioning (even with %-values) makes that impossible.
不过，我不明白为什么你需要这么多绝对定位。在响应式设计中，容器应该“浮动” - 绝对定位（即使使用 % 值）使这成为不可能。
but there are alot of divs any fast way to do this?
You don't have to write the design for each div. Furthermore, I think your syntax #divis not ideal - div2 and div3 have the exact same layout - use a class instead!
您不必为每个 div 编写设计。此外，我认为您的语法#div并不理想 - div2 和 div3 具有完全相同的布局 - 改用类！
To apply css-styles to all divs:
将 css-styles 应用于所有 div：
div {
width: 40%
}
To apply a syntax to only one container:
将语法仅应用于一个容器：
HTML: <div id='unique'>content</div>
HTML： <div id='unique'>content</div>
#unique {
width: 40%
}
To apply a syntax to several containers (but not all):
将语法应用于多个容器（但不是全部）：
HTML: <div class='flat'>content</div><div class='flat'>content</div>
HTML： <div class='flat'>content</div><div class='flat'>content</div>
.flat {
width: 40%
}
or
或者
#div2, #div3, .flat {
width: 40%
}
You should probably take a look at this short css-introduction: http://www.cssbasics.com/introduction-to-css/
你应该看看这个简短的 css 介绍：http: //www.cssbasics.com/introduction-to-css/
