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 dc6dce4a544fdca2df29d5ac0ea9906b to implement border

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

set data structure and map data structure of ES6

Detailed explanation of new judgments about numbers in ES6

Introduction and export of commonJS and es6 specifications

The above is the detailed content of How to create a 1px border effect on the mobile terminal. For more information, please follow other related articles on the PHP Chinese website!