"Mobile End debug-5" abominable 1px universal Implementation Solution

Recently and design classmate Tune UI, met is a 1px has the ultimate pursuit of classmates, pixel eye See I write is not 1px, so let me well study a 1px exactly how to write the most convenient.

One, why not come out 1px?

In short: The 1px of CSS is just an abstract unit, not 1px in the actual device.

About the Retina screen:

We know that most of the iphone models now use the retina screen, while the retina screen has a resolution that increases by one more than the normal screen, meaning that the original 1-pixel-wide area can be crammed into 2 pixels . The 1px we write in CSS is a concept pixel that takes up 2px of the actual device on the retina screen.

For the mobile screen as a whole, a 750-wide mobile phone (iPhone6) in the CSS only need 375px to be able to express.

Second, how to write 1px on the mobile phone?

In fact, someone listed a lot of programs, useful transform, useful pictures, useful canvas, but also useful 0.5px ... From the operational simplicity point of view, with the transform scheme is relatively simple, and adaptation is relatively easy (0.5px solution Android does not support).

Principle: Write a 1px line and then Transform:scaley (0.5) or ScaleX (0.5) to reduce the 2px displayed on the retina to 1px in the actual screen.

Three, several 1px style practice scheme

1. Single Wire

2. Quadrilateral

3, Round corner quadrilateral

"Mobile End debug-5" abominable 1px universal Implementation Solution