Why are there 1px problems? How?

Preface

In the interview, we are often asked how to solve 1px problem , Know the solution , First of all, we need to know the source of this problem . In this article , I will try my best to explain the source of this problem , Think about the solution to this problem together .

Equipment size 、 Pixels 、 The resolution of the

Equipment size

Equipment dimension refers to the length of diagonal of equipment , It's in inches .

Pixels

Is the smallest image unit that makes up the color and brightness of a picture , It is the smallest unit that can be shown on the screen of the display screen .

The resolution of the

Screen resolution refers to the number of pixels vertically and horizontally , The unit is px.

For two screens of the same size ： When the screen resolution is low （ for example 640 x 480）, Fewer pixels are displayed on the screen , The size of a single pixel is relatively large . When the screen resolution is high （ for example 1600 x 1200）, There are many pixels displayed on the screen , The size of a single pixel is relatively small .

The higher the resolution , The more delicate the color is , That's why we pursue high-resolution devices .

Logical pixels

So there's a problem ： Now all sizes 、 Resolution devices emerge in endlessly , Pictures of fixed size parameters , If the resolution of the device doubles , So our picture has doubled on the device .（1CSS Pixels appear on the screen as 1 Device physical pixels , Double the resolution , The number of pixels in the length and width of the device has doubled ）

For front-end developers , How can we solve this problem ？ Do you want to design a design draft for all kinds of models ？ In response to this question , Jobs proposed the concept of logical pixels , Can solve this problem very well .

Logical pixels

Jobs in iPhone4 For the first time at the conference Retina Display( Retina screen ) The concept of , stay iPhone4 Using the retina screen , hold 2x2 Pixel when 1 Pixel usage , This makes the screen look more refined , But the size of the elements doesn't change .

From then on ios High resolution devices , One more logical pixel . These devices differ in logical pixels, although not across a large span , But there is still a difference , Therefore, the problem that mobile pages need to be adapted .

Reference article

It is worth mentioning that , stay PC End ,1CSS Pixels still appear as 1 Physical pixel , But on mobile devices （ Including Android phones ）, Then came the concept of logical pixel ,1CSS Physically, the specific pixel value of a pixel is determined by different logical pixels of the device .（ It's a little twisted ）

for instance : iPhone6 The physical pixel of the image is 750*1334, The logical pixel is 375*667, The device pixel ratio is 2, That means we put 2*2 The physical pixels of the 1*1 Pixels to use . When we set the width of an element to 10px when , We're actually setting logical pixels

Device pixel ratio dpr

Device pixel ratio （device pixel ratio）, That is, the ratio of logical pixels to physical pixels of the device .

Common are 2dpr、3dpr.

1px problem

If we want to draw a physical pixel as 1px Border , We can first query the of this device through media query dpr So the pixel ratio is 2dpr On the device , We are css To set border:0.5px solid red, It's easy to understand , because css What we write in is logical pixels .

If we do this , In different browsers , In fact, the display effect is very different .

1. chrome： The less than 0.5px As 0, Greater than or equal to 0.5px Act as 1px
2. firefox： Will be greater than or equal to 0.55px Act as 1px
3. safiri: To set greater than or equal to 0.75px Act as 1px
   Further observe on the mobile phone iOS Of Chrome Will draw 0.5px The edge of , And Android (5.0) Native browsers don't work . So directly set 0.5px There are great differences between different browsers .

We can use pseudo elements +transform To solve the problem

.scale-1px{
    
  position: relative;
  border:none;
}
.scale-1px:after{
    
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  /* The core is to use transform Sizing Border */
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

It can also be combined with JS Code to determine whether the device pixel ratio is 2dpr

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}

The triple screen solution is similar . The core principle is to add... Through pseudo elements 1px Border , And pass transform Scale the border in the same way

summary

Before the concept of logical pixel was proposed ,1px Of CSS Pixels are reflected as 1 Physical pixel , After the concept appeared , On mobile devices ,1px Of CSS The physical pixel represented by the pixel is determined by the logical pixel ratio .

Therefore, it also extends 1px problem , Because usually we are designing 1px When the border of , We want to 1px Physical pixels . If we only calculate what needs to be written according to the pixel ratio of the device CSS When the pixel , There will be many compatibility problems due to the strategies of different browsers , In response to this problem , We can use pseudo elements +transform To solve the problem .

Reference article

Reference article 1

Reference article 2