使div内容响应 [英] Making div content responsive

问题描述

我的内容目前无响应。

My content isn't responsive at the moment. I've tested it on iPhone and the text goes over the screen.

我已将容器的CSS更改为：

I've changed the CSS of my container to:

#container2 {
    width: 960px; 
    max-width: 90%;
    position: relative;
    left: 50%;
    margin-left: -480px;
    line-height: 1.4em;
}

当我在更改后测试它时，内容消失。我读了，把最大宽度：90％;将允许其不超过边界宽度（ http：// webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design ），但显然它没有工作。我做错了什么？

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?

推荐答案

试试这个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%; }
}

这里的演示： http://jsfiddle.net/ongisnade/CG9WN/

这篇关于使div内容响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！