ロゴを中央に配置した 1 ページの Web サイトを作成しています。
このロゴには 4 つのバージョンがあります。レギュラーサイズ、regular@x2、mobile、mobile@x2。
適切な状況下で適切なロゴのほとんどを提供する方法を見つけましたが、ロゴの mobile@x2 バージョンを提供する方法がわかりません。
これは、これらのロゴに使用しているメディア クエリ コードです。
通常@x2:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
モバイル：
@media handheld, only screen and (max-width: 767px)
2 つを組み合わせて、ブラウザ ウィンドウの幅が 767px 未満になったときに Retina ディスプレイ用に提供されるバージョンを作成する方法はありますか?