html - 使 div 内容响应

Question

我的内容目前没有响应。我已经在 iPhone 上对其进行了测试，文本显示在屏幕上。

我已将容器的 CSS 更改为：

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

当我在更改后对其进行测试时，内容消失了。我读到了 max-width: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

那里没有很多事情要做，但我认为您正在寻找的是翻转widthandmax-width值：

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

这将为您提供一个占可用空间宽度 90% 的容器，最大为 960 像素，但这取决于其容器本身的可调整大小。响应式设计不过是一大团蜡，所以这甚至不会划伤表面。

Answer 3

@media screen and (max-width : 760px)（适用于平板电脑和手机）并与此一起使用：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">