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-

bottom

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.

Implementierungsmethode

Methode 1:

Pseudoklasse

Positionierung + Skalierung

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

. Ein 1-Pixel-Rand wird durch die Pseudoklasse gezogen und unterhalb des Elements positioniert, das den unteren Rand darstellt

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 dc6dce4a544fdca2df29d5ac0ea9906b direkt, um die Grenze zu implementieren

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

ES6s festgelegte Datenstruktur und Kartendatenstruktur

Detaillierte Erläuterung neuer Urteile über Zahlen in ES6

Einführung und Export von CommonJS- und ES6-Spezifikationen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen 1-Pixel-Randeffekt auf dem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!