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 では、単純に「none」またはこれに似た別の画像に変更できると思いました (この時点でいくつかのバリエーションを試しました)。

#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 に答える