Staram się obsługiwać różne proporcje pikseli na obecnej stronie, którą rozwijam. Chcę również upewnić się, że podaję wszelkie wymagane prefiksy przeglądarki, aby obsługiwać najszerszą gamę urządzeń / przeglądarek w granicach rozsądku. Poza tym, używam SVG tam, gdzie to możliwe, ale potrzebuję rozwiązania dla obrazów fotograficznych. Idealnie, chciałbym podać:

1. @ 1x image (Pixel Ratio 1.0)
2. @ 2x image (Pixel Ratio of 1.25+)
3. @3x image (Pixel Ratio of 2.25+)
4. @ 4X image (Pixel Ratio of 3.25+)

Moje pytanie brzmi, jaki byłby najlepszy sposób na pisanie zapytań medialnych, aby to osiągnąć? Moim głównym zmartwieniem jest to, że moje argumenty są poprawne dla tego, co próbuję osiągnąć. Będę wdzięczny za wszelkie sugestie i Rady. Obecnie Mój kod jest następujący:

/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
       only screen and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-device-pixel-ratio: 2.25),
       only screen and (min-resolution: 2.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4),
       only screen and (-webkit-min-device-pixel-ratio: 3.25),
       only screen and (min-device-pixel-ratio: 3.25),
       only screen and (min-resolution: 3.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

Alternatywa 1: rozważałem użycie znacznika <picture>, aby to osiągnąć. Wiem, że możesz zapewnić alternatywną zawartość dla przeglądarek które nie wspierają <picture>, co byłoby moim głównym zmartwieniem w jego wykorzystaniu. Myślicie, że to byłaby najlepsza praktyka w dostarczaniu zdjęć dla wielu proporcji pikseli?