2

私はモバイルブラウザとデスクトップブラウザで実行されるアプリを開発しています。アイコンのサイズを修正できるソリューションを見つけようとしています。デスクトップブラウザではアイコンを小さくし、モバイルブラウザではアイコンを大きくしたい。

メディアクエリは画面密度を検出できますか？検出できる場合、画面の密度によってアイコンのサイズが決まりますか？

そしてもう一つのこと：画面サイズや密度を検出し、より良い選択に応じてアイコンを調整する方が良いですか？

4

2 に答える 2

2

はい、ピクセル密度を検出するメディアクエリがあります。次に例を示します。

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Then you would change your background image and background image size here */
}

この記事のCSS-Tricksには、さらに多くの情報があります。

于 2013-02-14T15:29:14.477 に答える
2

デバイスのサイズとピクセル密度のどちらをターゲットにするかは難しい問題です。その都度の詳細に依存し、サイトで両方を組み合わせてはならないことは言うまでもありません。すべてをカバーしたいメディアクエリは次のとおりです。

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx) {

   /* your retina rules here */

}

...これは、SVG グラフィックスやアイコン フォントではなく PNG を使用している場合におそらく最も役立ちます。retinafy.meを見ることをお勧めします- これは便利なリソース (ただし無料ではありません) であり、そのコードのソースです。

于 2013-02-14T15:36:34.263 に答える