2

メディア クエリを実装したstyle.cssは次のとおりです。

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }

/* Large desktop */
@media (min-width: 1200px)
    body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) 
    body {
        background: #b5ebf9 !important;
    }
/* Landscape phone to portrait tablet */
@media (max-width: 767px)
    body {
        background: #b5ebf9 !important;
    } 
/* Landscape phones and down */
@media (max-width: 480px)
    body {
        background: #b5ebf9 !important;
    }

そして、これを HTML に追加して、検出できるようにしました (これは正しいと思います)。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

そして明らかに、ヘッダー内の上記の CSS ファイルにリンクされています。

しかし、何らかの理由で、 color の代わりに背景画像が常に表示されます#b5ebf9。

私は何を間違っていますか?! これを修正するために、1 ～ 2 日間オンとオフを繰り返しました。私は試した...

  • デバイスごとに個別の CSS シートを作成し、それらのスタイル シートにmediaタグを含めてリンクします (まったく反応しません)。
  • また、上記の CSS から最初の body クエリを削除しようとしました。これにより、すべてのデバイスで背景がその色に保たれ、背景画像はまったくありません! （背景画像をデスクトップ画面に表示したい。）

助けてください！

4

2 に答える 2

4

{}メディア クエリを再グループ化するには、次のものが必要です。

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
}

/* Large desktop */
@media (min-width: 1200px){
    body {
        background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
        background-repeat: no-repeat;
        background-position:bottom left, bottom right;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    body {
        background: #b5ebf9 !important;
    }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px){
    body {
        background: #b5ebf9 !important;
    } 
}
/* Landscape phones and down */
@media (max-width: 480px){
    body {
        background: #b5ebf9 !important;
    }
}
于 2013-06-03T17:12:00.940 に答える