使div内容响应

Question

我的内容目前没有回应.我在iPhone上测试了它,文字在屏幕上显示.

我已将容器的CSS更改为:

#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)但显然它不起作用.我究竟做错了什么？

Answer 1

试试这个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/

Answer 2

在那里不是很多,但我认为你正在寻找的是翻转width和max-width价值观:

#container2 {
  width: 90%;
  max-width: 960px;
  /* etc, etc... */
}

这将为您提供一个容器,该容器占可用空间宽度的90%,最大为960px,但这取决于其容器本身可以调整大小.响应式设计虽然是一个完整的大蜡球,所以这甚至不会划伤表面.