2

プログレッシブ エンハンスメント、ブラウザ/デバイス サポート、「モバイル ファースト」、iOS の「レティーナ」ディスプレイ比率の複数のフレーバーを念頭に置いてください...

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { @import '2x'; }

私はこれを見てきましたが、それはほとんどあまりにも簡単に見えます:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi) { @import '2x'; }

最小解像度の参照: http://www.w3.org/TR/css3-values/#resolution

4

1 に答える 1

0

safari は webkit エンジンを使用し、android も同様であるため、コードの 2 番目のブロックは、Apple のラインナップ全体と、chrome または Blink エンジン (Webkit のフォーク) を使用する Opera の新しいバージョンを使用するデスクトップまたはモバイル デバイスを対象としています。 . コードの最初のブロックは、前述の Web ブラウザーと同様に、すべての Web ブラウザーを対象としています。

角括弧内のコードに関するヒントとして、2x.css ファイルのコードを角括弧内にそのまま挿入できます。メディア クエリの直後にあるため、ブラウザは css の解析とレンダリングを高速化するだけでなく、ブラウザをさらに遅くする @import ステートメントの使用を防止します。

@media only screen and (-webkit-min-device-pixel-ratio: 2) and ( min-resolution: 192dpi) {
    body {
        background: brown;
    }

    #wrapper {
        background: green;
    } 
}

これは、メディア クエリを使用するときに行いたいことでありonly screen、各指定の間にカンマを使用しないでください。and十分です。

于 2012-09-04T15:15:57.310 に答える