Html 使 div 内容具有响应性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12632500/
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
Making div content responsive
提问by user1636968
My content isn't responsive at the moment. I've tested it on iPhone and the text goes over the screen.
我的内容目前没有响应。我已经在 iPhone 上对其进行了测试，并且文本会越过屏幕。
I've changed the CSS of my container to:
我已将容器的 CSS 更改为：
#container2 {
width: 960px;
max-width: 90%;
position: relative;
left: 50%;
margin-left: -480px;
line-height: 1.4em;
}
When I test it after the change, the content disappears. I read that putting max-width:90%; would allow it to not exceed the boundary width (http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design) but obviously it didn't work. What am I doing wrong?
更改后进行测试时，内容消失。我读到放置 max-width:90%; 将允许它不超过边界宽度（http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design）但显然它不起作用。我究竟做错了什么？
回答by Fredy
try this css:
试试这个CSS：
/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
@media only screen and (max-width: 479px){
#container2 { width: 90%; }
}
Here the demo: http://jsfiddle.net/ongisnade/CG9WN/
回答by ultranaut
Not a lot to go on there, but I think what you're looking for is to flip the widthand max-widthvalues:
没有很多事情要做，但我认为您要寻找的是翻转width和max-width值：
#container2 {
width: 90%;
max-width: 960px;
/* etc, etc... */
}
That'll give you a container that's 90% of the width of the available space, up to a maximum of 960px, but that's dependent on its container being resizable itself. Responsive design is a whole big ball of wax though, so this doesn't even scratch the surface.
这将为您提供一个容器，其宽度为可用空间宽度的 90%，最大为 960 像素，但这取决于其容器本身可调整大小。响应式设计虽然是一个大蜡球，但它甚至不会划伤表面。
回答by Scriptery
@media screen and (max-width : 760px)(for tablets and phones) and use with this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@media screen and (max-width : 760px)（适用于平板电脑和手机）并与此一起使用： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
