我的内容目前没有回应。我在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),但显然它不起作用。我做错了什么?
答案 0 :(得分:14)
试试这个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%; }
}
答案 1 :(得分:8)
在那里不是很多,但我认为您正在寻找的是翻转width
和max-width
值:
#container2 {
width: 90%;
max-width: 960px;
/* etc, etc... */
}
那将为您提供一个容器,该容器占可用空间宽度的90%,最大可达960px,但这取决于其容器本身可以调整大小。响应式设计虽然是一个完整的大蜡球,所以它甚至不会划伤表面。
答案 2 :(得分:1)
@media screen and (max-width : 760px)
(适用于平板电脑和手机)并使用此功能:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">