0

私は自分のウェブサイトをスタイリングしていて、Retina ディスプレイに適したものにしたいと考えています。このため、高 dpi ディスプレイにメディア クエリを使用する予定でしたが、ブラウザで生成コードを表示したときのように、メディア クエリが機能しているとは思いません。私の Retina MacBook では、メディア クエリの代わりに、body にまだデフォルトの css があることがわかります。何故ですか？それに追加する必要があるものはありますか？デフォルトの css とメディア クエリの両方が同じ css ファイルにあることに注意してください。ただし、それは問題ではないと思います。

  /* ==========================================================================
   Theme Style
   ========================================================================== */

body {
    background-color: #ebebeb;
    /* background-image: url("../images/bg.png"); */
    background-image: url("http://bit.ly/Z1zQeb");
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    /* background-image: url("../images/bg_@2X.png"); */
    background-image: url("http://bit.ly/ZgBQ4c");
    background-size: 147px 147px;

}

編集:コンソールにもこのエラーが表示されます:INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

4

1 に答える 1

1

スタイルを適用するタグが指定されていません。これを試して。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        /* background-image: url("../images/bg_@2X.png"); */
        background-image: url("http://bit.ly/ZgBQ4c");
        background-size: 147px 147px;
    }
}
于 2013-03-07T14:38:23.533 に答える