2

好的，我目前正在指导我的样式表，如下所示：

<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />  
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>

在 Site.css 上，我有一个带有背景图像的 ID：

#container { 
    width: 1000px;
    margin-left: auto;
    margin-right: auto; 
    background: url('../images/topbackground.gif') no-repeat;
}

在 mobile.css 上，我想我可以简单地将其更改为“无”或其他图像，有点类似于此（此时我尝试了几种变体）：

#container {
    width: 100%;
    margin-left: 0;
    margin-right: 0; 
    background: #ffffff none;
    z-index: 30;
}

但是，它似乎不起作用。背景仍然显示在网站的移动版本上。我一直在 Opera Mini 和 Android SDK Emulator 中查看它。该网站的移动版本从 mobile.css 中获取所有其他属性，而不是背景图像更改。

我知道在这一点上它必须是显而易见的，我只是忘记了。任何帮助，将不胜感激。

4

1 回答 1

0

这是因为您在加载 Site.css 之前加载了 mobile.css。（在您制作的示例中）。我认为如果你先插入网站然后 mobile.css ..

如果您出于某种原因需要保持这种状态，则需要!important在语句之后使用。

在这里您可以找到一个工作示例：http: //jsfiddle.net/2EaQb/

于 2010-12-27T20:43:20.943 回答