So erstellen Sie einen 1-Pixel-Randeffekt auf dem mobilen Endgerät-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-03-10 15:19:47

Original

2112 Leute haben es durchsucht

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: &#39; &#39;

Nach dem Login kopieren

Methode 2: Verwenden Sie

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)

Nach dem Login kopieren

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!