Brainstorming, what are the ways css can load different icons according to different pixels per inch of different devices?

  html5, question

clipboard.png

At present, we know that there are these aboveCss pixels/actual pixelsThe ratio of.

At present, I only know two ways:http://bbs.blueidea.com/home.php? mod=space&uid=168495&do=blog&id=23366

But both of them need to write a lot more code, and it is meaningless to repeat them. Is there any other way? Or is it still the above method, but there are tools that can write quickly?

Tell me about a method of loading different icons for Retina screen.
At present, many mainstream websites of Taobao, Jingdong and Tencent are using css4 new technology, background-image: set (URL (… a) 1x, URL (… b) 2x); There is a compatibility problem. The screenshot is as follows:
clipboard.png
Mainly for the Retina screen, the ordinary screen uses a small picture A, and the Retina screen uses a double enlarged picture B.