One pixel problem on the moving side

Recently I found a pixel in the mobile side will have a bug, why? I found that at the time of testing, a pixel-wide border of a phone of different sizes changes with the screen. Although not a big problem, but I found the interview will also ask, so I looked up some answers to summarize.

1. You can do this by scaling down the scale in the transform:

   . border-bottom{    position:relative;    Border-top:none!important;}. Border-bottom::after {    content: "";    Position:absolute;    left:0;    bottom:0;    width:100%;    height:1px;    Background-color: #e4e4e4;    -webkit-transform-origin:left Bottom;    Transform-origin:left Bottom;}

   Then through the media query

   /* Twice times screen */@media only screens and (-webkit-min-device-pixel-ratio:2.0) {    . border-bottom::after {        - Webkit-transform:scaley (0.5);        Transform:scaley (0.5);    }} /* 3 times times screen */@media only screens and (-webkit-min-device-pixel-ratio:3.0) {    . border-bottom::after {        - Webkit-transform:scaley (0.33);        Transform:scaley (0.33);    }}

   is actually a block-level element of a pixel's height.

3. The second approach is simple, using a single pixel image instead.

   . border-image-1px {    border-width:1px 0px;    -webkit-border-image:url ("# #") 2 0 stretch;}

One pixel problem on the moving side