Icon Optimization method under Retina display

Easy to understand, first to understand a few nouns:

• DPI (dots per inch), a number of dots, used to measure the hardware resolution of any device. A 21 "screen can have a resolution of 1680 X 1050, 27" screen can also have the same resolution, then the large screen is smaller than the small screen dpi.
• Dip (device independent pixels), devices independent pixels, equal to 1px on the DPI display, also known as DP.
• Dppx (dots per ' px '), number of points per PX unit. Since CSS inches are fixed with CSS pixels at 1:96, then 1dppx=96dpi.
• Device pixel ratio (DPR) is the ratio of physical pixels to css pixels.

Method One: Media Queries & Background-size

View Demo

/*** 注意：background-size的值是sprite.png的尺寸，而不是每个icon的尺寸*/.sprite-icon{    background-image:url(sprite.png);    background-size:98px 65px;       }/*** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个*/.icon-1{    background-position:0 0;}.icon-2{    background-position:-33px 0;}.icon-3{    background-position:-66px 0;}.icon-4{    background-position:0 -33px;}.icon-5{    background-position:-33px -33px;}.icon-6{    background-position:-66px -33px;}/* ** 2x图片要是1x图片的准确2倍** sprite中图标之间的间隙，也应是2倍** 每个图标无需重新写background-position*/@media (min-resolution:2dppx), /* Standard syntax */(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */{    .sprite-icon{        background-image:url([email protected]);     }  }

Method two: Background-image:img-set (URL (a.png) 1x, url ([email protected]) 2x)

Media queries has been able to solve the high-density display problem, why do I need Image-set? That's a good question. Two main benefits of using Image-set:

• Unlike media queries, Image-set does not tell the browser which picture to use, but rather provides some options. I want to use high-density devices at low speeds in the future to tell browsers to use low-resolution images. It would be even better if the browser could intelligently choose which pictures to use based on the current network conditions. The problem with media queries is that there is no discretionary right to the browser, which explicitly indicates that the browser uses a specific image if the pixel density is greater than 1 or 2. I know that this is only a theoretical (and more "out of the box") benefits. Today's browsers that support "Image-set" simply match the image source to the display density and do not provide additional functionality. But I firmly believe that the same picture needs a different resolution, so that the browser to choose the right picture is the direction.
• CSS coding Benefits: Bring together a picture source of different resolutions.

View Demo

/* ** 注意： ** 图片要求：2x图片要是1x图片的准确2倍，sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ .sprite-icon{ background-image:url(sprite.png); background-image: -webkit-image-set( url(‘sprite.png‘) 1x, url(‘[email protected]‘) 2x ); }/* ** 每个icon的background-positon只需写一次，即icon相对与1x图片的位置，在@2x图片中的位置也是这个 */ .icon-1{ background-position:0 0; } .icon-2{ background-position:-33px 0; } .icon-3{ background-position:-66px 0; } .icon-4{ background-position:0 -33px; } .icon-5{ background-position:-33px -33px; } .icon-6{ background-position:-66px -33px; }

Method Three: Media Queries & Background-size, suitable for only some of the icons provided 2x graph, and the icon position does not correspond, may be generated by the tool sprite.

View Demo

. sprite-icon{Background-image:url (more.png);}. icon-1{background-position:0 0;}. icon-2{background-position:-33px 0;}. icon-3{background-position:-66px 0;}. icon-4{background-position:0 -33px;}. icon-5{background-position:-33px-33px;}. icon-6{background-position:-66px-33px;}. icon-7{background-position:0 -66px;} /* * * * * Each icon's backgroud-size is half of the 2x image * * Each icon's backgroud-position is relative to the position of the 2x picture divided by 2*/@media (MIN-RESOLUTION:2DPPX),/* Standard syntax */(-WEBKIT-MIN-DEVICE-PIXEL-RATIO:2)/* Safari & Android Browser */{. icon-1{Background-im         Age:url ([email protected]);        BACKGROUND-SIZE:197PX 65px; background-position:0    0;         }. icon-2{Background-image:url ([email protected]);        BACKGROUND-SIZE:197PX 65px;    BACKGROUND-POSITION:-33PX 0;         }. icon-3{Background-image:url ([email protected]);        BACKGROUND-SIZE:197PX 65px;    BACKGROUND-POSITION:-66PX 0; }. icon-4{Background-image: URL ([email protected]);        BACKGROUND-SIZE:197PX 65px;    background-position:-99px-33px;         }. icon-5{Background-image:url ([email protected]);        BACKGROUND-SIZE:197PX 65px;    background-position:-132px-33px;        }. icon-6{Background-image:url ([email protected]);        BACKGROUND-SIZE:197PX 65px;    background-position:-165px-33px; }}

Icon Optimization method under Retina display