The best way to solve 1px border of mobile terminal (recommended)

In the development of mobile terminal, we often encounter the problem of element border thickening in the retina screen. This article will take you to explore the causes of the problem of border thickening and introduce the best solution on the market.

The origin of 1px border problem

Apple iPhone 4 first proposed the concept of retina display (retina screen). In the retina screen used by iPhone 4, 2×2 pixels are used as one physical pixel, that is, 2×2 pixels are used to display the contents of the original one physical pixel, so as to make the UI display more delicate and clear. These 2×2 pixels are called logical pixels. For example, the retina screen with a pixel ratio of 2 (DPR = physical pixel / logical pixel) is also called double screen. At present, there are triple screen and quadruple screen with higher pixel ratio on the market. In CSS, 1px refers to physical pixels, so the border set to 1px actually takes up two logical pixels in the retina screen with DPR = 2, which leads to the visual experience of interface border thickening.

Using transform to solve

By setting the box sizing of elements as border box, and then building pseudo elements, and then using CSS3 transform scaling, this is the most popular solution in the market. This method can satisfy all scenarios, and it is flexible to modify. The only drawback is that for the elements that have used pseudo elements, one more useless element should be nested. The specific implementation is as follows:

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

So you can get a border of 0.5px.

You can also combine media query (@ media) to solve the problem of screen border with different DPR values, as follows:

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

Note: Safari browser of IOS system does not support standard min resolution and uses non-standard min device pixel ratio.

Using pixel- border.css solve

pixel- border.css It is a general CSS tool to solve 1px border of mobile terminal. Using transform solution, only a few lines of source code, very convenient to use, is the best solution found at present.

install

NPM installation:

npm install pixel-border --save

Horn installation:

yarn add pixel-border

Browser installation, it is recommended to install the compressed version:

<link rel="stylesheet" href="path/to/pixel-border.min.css"><link>

use

Pixel border uses transform scaling to set the border for the element through the element’s: before pseudo element. Therefore, you can use the native CSS border attribute to set the border for the primitive. You only need to add a pixel border or pixel border = “true” attribute to the element and set the border style value of the element. A single pixel border is created as follows:

< div pixel border style = "border style: solid;" > single pixel border < / div >

Note: pixel border has been set to a fixed value of 1px for the border of the element, so do not set border width for the element, and the box sizing value of the element is set to border box, please do not reset to other types of values.

Set any border:

When setting the border on one side of an element, you only need to set the value of one of border top style, border bottom style, border left style and border right style for the element, and set the value of border color for the element. Set the top border as follows:

<style>
  .border-top {
    border-top-style: solid;
    border-top-color: red;
  }
</style>

< div class = "border top" pixel border > top border < / div >

Set rounded border:

When you need a rounded border, always set the percentage value for border radius. As follows:

<style>
  .border-radius {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-color: red;
    border-radius: 10%;
  }
</style>

< div class = "border radius" pixel border > rounded border < / div >

So far, this article about the best way to solve the mobile terminal 1px border is introduced here. For more information about how to solve the mobile terminal 1px border, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!