Thinking about twice times the front end (involving retina)

Excell format

1 CSV format after export can not be opened with Excell, will be garbled. Open it with Notepad and then "(the quotation marks out of the English), you can."

About the operation of twice times diagram

Concept:

device pixels : Also called physical pixels, showing the smallest physical parts on the device. Like iphone 5:640 x 1136px. Different models have different device pixels, fixed dead.

We need to talk about it. The display resolution is certain, the smaller the display, the clearer the image, conversely, when the display size is fixed, the higher the display resolution, the clearer the image.

• High-resolution screens: under Windows systems, improving screen resolution is generally done by increasing the screen size. With the increase of screen resolution, the image and text display target will be reduced correspondingly, which makes viewing extremely inconvenient.
  Retina Why so small screen will have such a large resolution. Why so large resolution, instead of making text and images smaller, but more clear?

• High pixel density screen: High PPI, as an example of an evaluated Retina Retina screen, does not increase the resolution by increasing the size as a normal display, but rather increases the resolution by increasing the number of pixels per area of the screen, or pixel density, so that there is a high pixel density screen. And the Mac uses vector fonts.

css pixels : CSS pixel. Abstract concepts, device-independent pixels. Dips,device-independent pixels. In the standard case a CSS pixel corresponds to a device pixel.

body{
width:2px;
height:2px;
}

Let's compare the differences between the two.

Using CSS to draw a 2 x 2px box, on the normal device screen is 2 x 2px device pixels. However, the Retina screen uses 4 x 4px of device pixels.

device-pixel-ratio: In JS, it's called Window.devicepixelratio.
Formula: Window.devicepixelratio = device pixel/css pixels. Thus, on an iphone that is not a retina screen, the screen physical pixels are 320 pixels, and the independent pixels are 320 pixels, so window.devicepixelratio equals 1.
But on the retina screen of the iphone, the screen physical pixel 640 pixels, independent pixels or 320 pixels, so, window.devicepixelratio equals 2.

screen density : PPI: The number of pixels per inch. Retina Screen: Compresses the resolution of the 960*640 in a 3.5-inch display. That is, the pixel density of the screen reaches 326 pixels per inch (ppi). When the ppi>300, the naked eye can not tell the resolution.

Why do I need twice times Graph/multi-times graph

1 for bitmaps:

• When a raster image is displayed in full-screen mode under a standard device, an image pixel corresponds to a unit of pixels, resulting in a full-fidelity display. Because a position pixel cannot be further split,
• When under the retina screen, he will zoom in four times times to maintain the same size of the physical pixel, which will lose a lot of detail and cause distortion. In other words, each of the pixels is multiplied by four to fill the same physical surface displayed under the Retina screen.

Working principle:

Method One:

Use CSS styles and twice-fold graphs.

There is a picture of 200x200 pixels (css pixels, that is, normal pixels or standard pixels), we set a CSS style for the image:

img{
width:200px;
height:200px;
}

Picture blur: Fixed css pixels. Fix the width and height well. At this point the width and height of the pixels contained in the different displays have been determined. Then put the picture on two different screens: then the Ritina screen picture will blur. Because the width height of the CSS pixel does not have the same number of pixels as the retina display. You pulled the picture so big. Inevitably blurred.
In the iPad2 or mini ipad is a very normal picture, but in the new ipad, 1 CSS Pixel point actually has 4 bit pixels, 1 is divided into 4, obviously not enough points ah, only color approximate selection, so, the image is blurred.

So, to make the images below the retina screen appear high, the original size of the image we need cannot be 200x200 pixels, but requires twice times the width of the 400x400 pixels, and the CSS pixel limit remains:

IMG {
width:200px;
height:200px;
}

At this point, the Retina screen will show ok (non-retina screen image is compressed-reduce the sampling of pixels-waste of resources!) ）。

Method Two:

Query pixel density: Prepare two sizes but the same picture. Use the CSS media query or JS retina.js to adjust the image. (browser support is a problem)
1 CSS:
You can either pass the "Device-pixel-ratio" property or its extended properties "Min-device-pixel-ratio" and "Max-device-pixel-ratio". These media queries can use Background-image to prepare images of high-precision pixels for retina.

. Icon {
Background-image:url (Example.png);
background-size:200px 300px;
height:300px;
width:200px;
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
Only screen and (-moz-min-device-pixel-ratio:1.5),
Only screen and (-O-MIN-DEVICE-PIXEL-RATIO:3/2),
Only screen and (min-device-pixel-ratio:1.5) {
. Icon {
Background-image:url ([email protected]);
}
}

2 JS:
Retina.js to deal with.

Method Three:

Vector Graphics for scaling (browser support is a problem)

When you get the device pixel ratio, you know the ratio between the device pixel and the CSS pixel. That's window.devicepixelratio.
Multiples: When this ratio is 1:1, 1 device pixels are used to display 1 css pixels.
Twice times graph: When this ratio is 2:1, 1 css pixels are displayed using 4 device pixels,
Three times times graph: When this ratio is 3:1, 1 css pixels are displayed using 9 (3*3) device pixels.

Thinking about twice times the front end (involving retina)