So erstellen Sie einen 1-Pixel-Randeffekt auf dem mobilen Endgerät

Dieses Mal zeige ich Ihnen, wie Sie einen 1px-Randeffekt auf dem mobilen Endgerät erstellen sehen. . Hintergrund

Verwenden Sie den Stift unter vue.js, um einen 1-Pixel-Rahmen zu implementieren, wenn Sie das CSS-Stilattribut

border-

Bei der Implementierung eines Rahmens handelt es sich um einen 1-Pixel-Rahmen (1 dünne Linie) in einem PC-Browser, aber auf einem mobilen Gerät gilt: Je größer der DPI-Wert, desto klarer der Bildschirm. Wenn Sie diese Eigenschaft verwenden, wird die Linie auf Mobilgeräten sehr dick.

Pseudoklasse

1 Definieren Sie zunächst eine Pseudoklasse für das Element, um einen Rahmen zu zeichnen Es handelt sich um eine absolute Positionierung

2. Implementieren Sie eine Klasse zum Skalieren Pseudoklasse. Skalieren Sie die vertikale Achse proportional basierend auf der minimalen DPI des Geräts.

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

Methode 2: Verwenden Sie

@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)