6

私のサイトには、パッド/スマートフォンのさまざまな要素のサイズを変更する多くのメディア クエリがあります。低解像度のラップトップで同じ要素のサイズを変更する別のメディア クエリを追加したところ、Firefox と Chrome が background-size の使用を無視しているように見えることがわかりました。

メディア クエリは機能しており、一部は取得されていますが、背景サイズは取得されていません。サファリでは問題なく動作します。

理由はありますか？

私のCSSは次のとおりです。

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background-size:95%;
        background: url(../img/title_we_are.png) bottom center no-repeat;
        height:254px;   
    }
}
4

3 に答える 3

22

Yourbackground-sizeは省略形の前に配置されるbackgroundため、短縮形はデフォルト値 ( )でそれをオーバーライドしautobackground-size、以前の宣言が有効になるのを防ぎます。これは、省略形のプロパティを使用する場合によくある落とし穴です。

これが Safari で機能する場合、値を認識するように Safari がbackground省略形を更新していない可能性があります。background-sizebackground-size

background-size設定値が有効になるように、それらを切り替える必要があります。

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background: url(../img/title_we_are.png) bottom center no-repeat;
        background-size:95%;
        height:254px;   
    }
}
于 2013-04-11T14:42:51.777 に答える
0

.. 別の css 形式があるため:

-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera
于 2013-04-11T13:56:20.307 に答える