2

CSS でメディア クエリをスタックしようとしていますが、正しく動作しないようです。私が達成しようとしているのは、任意のメディア クエリに対して単一の CSS ルール セットを持つことです。通常、andを使用してさまざまなルールに適用できることはわかっていますが、この場合はベンダー固有のプレフィックスを処理しようとしているため、ブラウザーがすべての条件を満たさないことになります。

ここに私がこれまでに持っているものがあります：

@media only screen and (min--moz-device-pixel-ratio: 2),
@media only screen and (-o-min-device-pixel-ratio: 2/1),
@media only screen and (-webkit-min-device-pixel-ratio: 2),
@media only screen and (min-device-pixel-ratio: 2) {
    /* My rules go here */
}

このような規則を積み重ねる正しい方法は何ですか? また、この件に関して他に読み物があれば、調べてみたいと思います。

4

1 に答える 1

5

正しい方法は@media、最初に1つだけを使用し、その後にメディアクエリのコンマ区切りリストを追加することです。

@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    /* Your rules go here */
}

@media個別のメディアルールを宣言する場合にのみ許可され、単一のルールで複数のメディアクエリを分離するために使用されることはありません。

于 2012-09-06T18:42:32.233 に答える