我正在创建一个响应式布局，它适用于大多数格式，但宽度为 320 像素的智能手机除外。我在 CSS 和单独的样式表中都使用了媒体条件，但似乎都不起作用，就好像设备忽略了条件代码一样。
我的原始 CSS 看起来像这样（对于 480 像素及更高的设备）：
#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
background-image:url(../images/logorepeat.png);
background-position:0px 26px;
background-repeat:repeat-x;
z-index:50;
}
#landscape
{
position:relative;
margin-top:-27px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}
因为我不需要 320px 的设备（例如 iPod Touch）中的重复背景，所以我在此设备的标注中删除了它（并将其上方的 div 向上移动）：
@media screen and (max-width: 320px)
{
#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
z-index:50;
}
#landscape
{
position:relative;
margin-top:-45px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}
}
有什么建议么？
谢谢！:)