Some time ago, some people asked about 1px in the group, and suddenly the group exploded. It seemed that many people did not understand the 1px question. What is the 1px question? Why is 2px ok? How to solve 1px problem? Read this article and believe that you have a fundamental understanding of these concepts.

What is a 1px problem?

In fact, it is very simple to describe. When the UI gives you the design draft, mark the border as 1px, and write border:1px in the code directly. It turns out that in some phones,1px is thicker than the actual effect, which is a typical 1px problem.

Group friend: Nani? How come I haven't noticed that 1px is thicker? Me: Well, maybe you have a low level of UI reductionCopy the code

Why the 1px problem?

First of all, we need to make it clear that 1PX is not certain to appear in our development. For example, PC will not appear, and some mobile phones may not appear. Why is this happening? Start with a question mark and look down with the question.

A wave of concepts came

(device independent pixels,CSS pixels, logical pixels) VS (Device pixels, physical pixels)Copy the code

Very simple, iPhone6/7/8 for example, if we open up the Chrome Developer tool here we can see iPhone6/7/8 is 375 by 667 and that’s CSS pixels, aka logical pixels and device independent pixels

But you bought the iPhone7 and the specs clearly stated that your screen was 750*1334. What the hell is that?

Device pixel ratio

Now that we know that CSS pixels are not the same as physical pixels, how do they relate? And the answer is it doesn’t matter, it’s just a different concept, but physical pixels versus CSS pixels gives you another concept device pixels versus CSS pixels, right

Device pixel ratio = Physical pixel/CSS pixelCopy the code

Remember we said above why there is no 1px problem on the PC side? I can answer that now because on the PC CSS pixel == physical pixel which means device similarity ratio is 1 so when we write 1px on the page it’s going to be 1px on the page

But on the mobile end, like the iPhone7 mentioned above, it obviously has a device pixel ratio of 750/375 = 2, so when the UI gives us a design with a border of 1px(physical pixels) we need to convert it to CSS pixels:

CSS pixel = Physical pixel/device pixel ratio = 1px/2 = 0.5pxCopy the code

It’s bad at 0.5px, because some browsers will parse 0.5px to 1px, and then use the formula to convert the physical pixels to

Physical pixel = CSS pixel * device pixel ratio = 1px * 2 = 2pxCopy the code

So it was supposed to be 1px and it ended up being 2px, which is what we call thickened

Remember that some phones don’t have 1px problems? This is not to say that such phones are good for two main reasons

  • Older phones, with a device pixel ratio of 1, are just as natural as PCS1pxThe problem
  • Some mobile browsers are parsing0.5 px.When normal, that naturally will not appear1pxSuch as some iphones

If a larger pixel ratio on your device means a higher resolution screen on your phone, that means the bug will be more pronounced on your phone

Do you understand?

Why is 2px ok

Personally, there are two main points

  • 1px questions are just a general term for this type of question
  • Now most cell phonesThe device pixel ratio is 2“, which means that 2px physical pixels are converted to CSS with 1px pixels, and 1PX browsers can parse it properly, so it works

1px if solved

Baidu search a lot of solutions, picture method, pseudo class method, zoom method and so on, there is always a suitable for you, here I choose… the

Of course, I don’t think this is a bug if the UI is not very reductionist, because there are many bugs in a project that are more important than 1PX. But as a qualified front end, this kind of detail can make others feel professional 🤣

conclusion

The 1px problem is really relative to the design, not the fact that if we just write 1px on the page, it will be thicker

For example, if the design has a 1px border, the CSS is calculated to be 0.5px(since the design is 750*1330 and our page is 375*667, divide by 2 to calculate the CSS value).

For example, take iPhone 6(DPR 2) as an example

border-top: 1px solid red;
border-bottom: 0.5 px. solid red;
Copy the code

The above is resolvable0.5Mobile phone to see the effect, the following is in can not be resolved0.5 px.The effect on the phone

It can be seen that 1px and 0.5px are the same size on a phone that cannot parse 0.5px, so we can say that 0.5px is thicker. How can we say that 1px is a 0.5px problem

The last

Be sure to follow and like it if it helps