1px Cause of the problem

From the perspective of mobile terminal, let’s take iphone6 as an example.

Border-width :1px; border-width:1px; border-width:1px The 1px border issue has been created.

For designers it is 1px relative to 750px (physical pixels), for you it is 1px relative to 375px (CSS pixels) “actually you should be border-width:0.5px”.

The specific plan

Knowing the cause of the problem, it is easy to solve it.

Write borders with decimals

Media query, plus decimal notation

.border { border: 1px solid # 999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5 px. solid # 999}} @media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333 px. solid # 999}}Copy the code
  • Advantages: convenient
  • Cons: Android doesn’t work with lower versions of IOS, so this may be the future standard

Tranform adds pseudo-class tags

Using pseudo-class tags, more parent positioning, more media query zoom size implementation effect (note that “transform-Origin: left top;” )

<span class="border-1px">1 pixel border problem</span>
Copy the code
// less
.border-1px{
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border:1px solid red;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
      width: 300%;
      height: 300%;
      -webkit-transform: scale(0.33);
      transform: scale(0.33);
    }
  }
}
Copy the code

Note that the input button does not have :before, :after pseudo-elements

  • Pros: Not only rounded corners, but other borders can also be made this way
  • Disadvantages: Large amount of code, occupying false elements, easy to cause conflicts

box-shadow

Use shadows to simulate borders

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}
Copy the code

2 times the screen

Three times the screen

border-image

Creating a 1px border is essentially creating a 0.5px border, so we can take an image like this and make “border-image-slice” 2, so that half of the border is actually transparent and we get the “1px border” we want.

<div class="test">1 pixel border</div>
Copy the code
.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}
Copy the code

  • Modify color trouble, need to replace the picture
  • Rounded corners require special treatment and the edges can be blurred

background

This method is basically not used (trouble O(∩_∩)0), but take note

.background-image-1px { background: url(.. /img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }Copy the code

conclusion

In view of compatibility and flexibility, I recommend tranform to write with pseudo class labels to save time and cost.

The resources

  • Mobile terminal 1px thin line solution summary
  • Let’s talk about the 1px solution for Retina
  • 7 Ways to fix the 1px border on the Mobile Retina Screen