0

私は将来の証拠となる流動的なウェブサイトに取り組んでおり、次のことに同意しません。

@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)  { 
}

世界は網膜や、1、1.5、2 ピクセル比のデバイスだけではありません。今後も数を増やしていきます。私の質問は、これらすべての解決策と将来の解決策をどのようにターゲットにすればよいですか?

私の問題は、ユーザーが網膜のような「任意の」高解像度ディスプレイを持っているときに有効にしたい高解像度ディスプレイ用に、PNG（ピクセル比1の古いブラウザとデバイスをサポートするPNG）のSVGバージョンがあることです。したがって、膨大な量のメディア クエリを節約し、すべての将来の証拠を確保するために、一度だけ書くことを好みます。Mac Retina、iPhone、Dell、HP など、nexus phone など、すべての高解像度画面のマスター メディア クエリのように。

また、なぜ最小解像度のみが 192dpi または 2dppx なのですか? つまり、ピクセル密度 1.5 144dpi はどうでしょうか。最小値を 100dpi (標準は 96) に設定したほうがよいのではないでしょうか。標準を超えるものはすべて私の SVG を使用します。100dpi、101、102……144dpi……192……300dpi……900dpi……1000dpiなど。

4

1 に答える 1

2 
/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}


/* 2 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    /* Retina-specific stuff here */
}
于 2014-06-08T19:10:53.737 に答える