How to create a 1px border effect on the mobile terminal

This time I will show you how to create a 1px border effect on the mobile terminal. What are the precautions ? The following is a practical case. Let’s take a look. .

Background

Use stylus under vue.js to implement a 1-pixel border. If you use css style attributes

border-bottom

To implement the border, it is a 1 pixel border (1 thin line) on the PC browser, but on the mobile device, the larger the DPI value, the clearer the screen. Using this property, it will become a very thick line on mobile devices.

Implementation method

Method 1: Pseudo classPositioning + scaling

1. First define a pseudo class on the element where the border is to be drawn. This It is an absolute positioning. A 1-pixel border is drawn through the pseudo class and positioned under the element, which is the bottom border

border-1px($color)  position: relative
  &:after
    display: block    position: absolute    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color    content: ' '

2. Implement a class to scale the pseudo class. Scale the vertical axis proportionally based on the device's minimum DPI.

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)      transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)      transform: scaleY(0.5)

Method 2: Directly use