PX and physical pixels, logical pixels, 1px border problems in CSS

It's not always clear what the 1px in CSS has to do with logical pixels and physical pixels (as a front-end feeling very ashamed-_-! , today finally took the time to thoroughly figure out, in fact, after figuring out that things are very simple, but also only after figuring out, will feel simple (the language of "Zen and motorcycle Repair Art", haha haha).

Two kinds of pixels

Physical pixel : The pixel point that the device screen actually owns. For example, the iphone 6 screen has 750 pixels in the width direction and 1334 pixels in height, so the iphone 6 has a total of 750*1334 physical pixels.

logical pixels : Also known as "device independent pixels" (Devices independent Pixel, DIP), which can be interpreted as reflecting the number of pixels in the CSS/JS code.

Unit pixel ratio (device Pixel Ratio, DPR): The ratio of the physical pixels of a device to the logical pixels.

Pixels are also physical and logical? What's the difference between these two?

In fact, in a long time ago, there is no difference, CSS write a 1px, the screen will give you to render 1 actual pixels, dpr=1, how simple natural ~

But then things changed, and it was the Retina technology that used 4 or more physical pixels to render 1 logical pixels, so the size of the same CSS code would look the same on both retina and non-retina screens. But it's much finer on the retina screen.

On the Retian screen, the DPR is no longer 1, but more than 1, such as 2 (iphone 5 6 7 8) or 3 (a series of plus such as the iphone 6 Plus) or a non-integer (some android), and probably will rise.

For example, the physical pixels of the IPhone 6 have already been said to be 750*1334, what about its logical pixels? We just need to print out screen.width and screen.height in the iphone 6 Safari, and the result is 375*667, which is its logical pixel, which makes it easy to calculate the DRP as 2. Of course, we can also get the DRP directly through the Window.devicepixelratio value, and the print result is 2, which matches our expectations.

The wonderful iphone 6 Plus

Here we have to mention the iphone 6 Plus (as well as other fruit machines of the same size), the actual number of physical pixels is 1080*1920, but if you cut a screen, you will find the screenshot of the width of the picture is 1242*2208; The screen object of the browser will tell you that 6 Plus's logical pixel is 414*736, which is exactly one-third of the screenshot width, and the Window.devicepixelratio value is also 3.

So now we have 3 different pixel values? What's the situation?

So, the IPhone 6 Plus system-defined screen pixel is 1242*2208, the system will automatically plug these pixels into 1080*1920 actual pixels to render, the process is transparent to the developer, regardless.

So for the front end, you can think of 1242 as the 6 Plus "physical pixels", including the UE Miss Elder sister figure is also a 1242-standard, so you may want to 1242*2208 called the 6 Plus "design pixel."

Apple, is that what this is about?

In fact, the Apple company in the determination of 6 Plus of the DRP, tangled half a day: Choose 2 Bar, the same font size in 6 Plus looks smaller than 6, bad; Choose 3, the word is too big, resulting in a screen can show the content has not more than 6 , the most suitable for the vision of the DRP value is 2.46, but such a number can make designers and programmers crazy. Finally came up with the introduction of "design pixel" such a solution, both to make developers happy, but also let users cool, not beautiful?

1px border problem

With Apple's drive, retina technology has become standard on mobile devices, so front-end siege Lions must face the following facts:

1. You want to draw a 1px bottom border, but the screen simply plugs into a line of 2-3 physical pixels wide.
2. You can't manipulate physical pixels as directly as a colleague from Android or iOS.

This is the primary front-end interview must be the "1px border problem" of the origin.

Solution of 1px border problem strange, recount, but in my practical experience, the most respected method is to use the CSS3 Transform:scale, because simple direct, applicability and compatibility good.

You're not giving me two physical pixels? Add a Transform:scale (0.5), only one point left ~

Three points of physical pixels? Then scale (0.33)!

-webkit-min-device-pixel-ratio media queries using CSS can be processed for different DPR, with the less code as an example:

@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2) {    . border-bt-1px (@color) {        position: relative;         &:: After {            position:absolute;             Bottom: 0;             width: 100%;             height: 1px;             background-color: @color;             transform: ScaleY (0.5);        }     }}

The above is only one side of the scene, if the four sides have to have a box, how to do?

Then draw a DPR-size rectangular box, then scale, and finish ~

At this point, the knowledge of the pixel in this article should be sufficient to deal with the work of the general front end.

PX and physical pixels, logical pixels, 1px border problems in CSS