0

いくつかの css3 メディア クエリを含むスタイル シートがあります。

@media (max-width: 480px), (-webkit-min-device-pixel-ratio: 1.5) {
    p, label, .labelish {font-size: 1.2em;}
    h3 {font-size: 1.4em;}
        body{
         background-color: red !important;
        }
}

これで、ユーザーのブラウザーが 480px 未満の場合にのみこれらのスタイルを適用する最初の部分が理解できました。それ-webkit-min-device-pixel-ratio: 1.5は私が得ていないものです。高密度の画面ピクセル解像度を探していることを理解しています。しかし、Chrome の新しい Mac Retina スクリーンでなぜそれが機能するのかはわかりません。私が尋ねる理由は、新しい網膜スクリーンを備えたコンピューターと備えていないコンピューターが 2 台あり、上記の css が網膜スクリーンでのみ機能しているためです。

このリンクhttp://bjango.com/articles/min-device-pixel-ratio/を見つけました。これには、影響を受ける画面がリストされています

  • Google ネクサス S
  • サムスン ギャラクシー S II
  • HTC デザイア
  • HTC デザイア HD
  • HTC インクレディブル S
  • HTC速度
  • HTCセンセーション

このリストによると、Mac Retina スクリーンはこれらのスタイルを適用すべきではありません。

誰かがなぜこれが起こっているのか説明できますか.

4

1 に答える 1

2

このプロパティが CSS の残りの部分と同じように機能する場合-webkit-min-device-pixel-ratio: 1.5;、この比率が 2 と報告されたデバイスに適用する必要があります。これはmax-width: 480px;、幅 320px のデバイスに適用されるのと同じ方法です。

また、コンマ ( ,) は、CSS セレクター/リストに関しては OR 演算子です。それが意図されている場合は、代わりにANDを使用してください。

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)
于 2013-04-12T16:20:56.060 に答える