Der beste Weg, um den 1px-Rand auf Mobilgeräten zu lösen (empfohlen)

Bei der Entwicklung für Mobilgeräte tritt häufig das Problem auf, dass Elementränder auf Retina-Bildschirmen dicker werden. In diesem Artikel werden die Ursachen für das Problem der Randverdickung untersucht und die besten Lösungen vorgestellt, die derzeit auf dem Markt erhältlich sind.

Der Ursprung des 1px-Randproblems

Das Konzept des Retina-Displays wurde erstmals mit dem Apple iPhone 4 eingeführt. Beim Retina-Display des iPhone 4 werden 2 x 2 Pixel als 1 physikalisches Pixel verwendet, d. h. 2 x 2 Pixel werden verwendet, um den Inhalt anzuzeigen, der ursprünglich von 1 physikalischem Pixel angezeigt wurde, wodurch die Anzeige der Benutzeroberfläche feiner und klarer wird. Diese 2 x 2 Pixel werden als logische Pixel bezeichnet. Ein Retina-Bildschirm mit einem Pixelverhältnis von 2 (Pixel Ratio (DPR) = physikalische Pixel / logische Pixel) wird auch als Doppelbildschirm bezeichnet. Mittlerweile gibt es Dreifach- und Vierfachbildschirme mit noch höheren Pixelverhältnissen auf dem Markt. In CSS bezieht sich 1px auf physische Pixel. Daher nimmt ein auf 1px eingestellter Rahmen auf einem Retina-Bildschirm mit dpr = 2 tatsächlich eine Breite von 2 logischen Pixeln ein, was zu einem visuellen Eindruck eines dickeren Schnittstellenrahmens führt.

Gelöst mit Transform

Die beliebteste Lösung auf dem Markt besteht darin, die Box-Größe des Elements auf die Border-Box einzustellen, Pseudoelemente zu konstruieren und dann die Transformation von CSS3 zum Skalieren zu verwenden. Diese Methode kann allen Szenarien gerecht werden und ist flexibel anpassbar. Der einzige Nachteil ist, dass für Elemente, die bereits Pseudoelemente verwenden, ein zusätzliches nutzloses Element verschachtelt werden muss. Die konkrete Umsetzung sieht wie folgt aus:

.ein-Pixel-Rand {
  Position: relativ;
  Box-Größe: Rahmenbox;
}

.one-pixel-border::vor {
  Anzeige: Block;
  Inhalt: "";
  Position: absolut;
  oben: 50 %;
  links: 50%;
  Breite: 200 %;
  Höhe: 200%;
  Rand: 1px durchgehend rot;
  transformieren: übersetzen (-50 %, -50 %), skalieren (0,5, 0,5);
}

Dadurch erhalten Sie einen 0,5 Pixel breiten Rand.

Sie können Medienabfragen (@media) auch wie folgt kombinieren, um das Randproblem von Bildschirmen mit unterschiedlichen DPR-Werten zu lösen:

@media screen und (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen und (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

Hinweis: Der Safari-Browser unter iOS unterstützt nicht die standardmäßige Mindestauflösung und verwendet ein nicht standardmäßiges Mindestgerätepixelverhältnis.

Verwenden Sie pixel-border.css zum Lösen

pixel-border.css ist ein allgemeines CSS-Tool zur Lösung des 1-Pixel-Randproblems auf Mobilgeräten. Die Lösung mit Transform besteht nur aus wenigen Zeilen Quellcode und ist sehr einfach zu verwenden. Es ist die beste Lösung, die bisher gefunden wurde.

Installieren

npm-Installation:

npm installiere Pixel-Border --save

Garninstallation:

Garn fügt Pixel-Rand hinzu

Für die Browserinstallation wird empfohlen, die komprimierte Version zu installieren:

<link rel="stylesheet" href="Pfad/zu/pixel-border.min.css"><link>

verwenden

Pixel-border legt einen Rahmen für ein Element fest und verwendet dabei die Transformation, die über das ::before-Pseudoelement des Elements skaliert wird. Daher können Sie native CSS-Rahmeneigenschaften verwenden, um Rahmen für Elemente festzulegen. Fügen Sie dem Element einfach ein Attribut pixel-border oder pixel-border="true" hinzu und legen Sie den Rahmenstilwert des Elements fest. Dadurch wird ein ein Pixel breiter Rand erstellt:

<div pixel-border style="border-style: solid;">Einzelner Pixelrand</div>

Hinweis: „Pixel-Border“ wurde für den Rahmen des Elements auf einen festen Wert von 1 Pixel eingestellt. Legen Sie daher für das Element keine Rahmenbreite fest. Der Wert für die Boxgröße des Elements ist auf „Border-Box“ eingestellt. Setzen Sie ihn daher nicht auf andere Wertetypen zurück.

Legen Sie eine beliebige Grenze fest:

Wenn Sie den Rahmen einer Seite eines Elements festlegen, müssen Sie nur den Wert von einem der folgenden Stile festlegen: border-top-style, border-bottom-style, border-left-style, border-right-style für das Element sowie den Wert für die Rahmenfarbe des Elements. Stellen Sie den oberen Rand wie folgt ein:

<Stil>
  .border-top {
    Rahmen-Oberteil-Stil: durchgezogen;
    Farbe der oberen Umrandung: rot;
  }
</Stil>

<div class="border-top" pixel-border>Oberer Rand</div>

Abgerundeten Rand festlegen:

Wenn Sie einen abgerundeten Rand wünschen, legen Sie für den Randradius immer einen Prozentwert fest. wie folgt:

<Stil>
  .border-radius {
    Breite: 100px;
    Höhe: 100px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: rot;
    Randradius: 10 %;
  }
</Stil>

<div class="border-radius" pixel-border>Abgerundeter Rand</div>

Damit ist dieser Artikel über die beste Lösung des 1px-Randproblems auf Mobilgeräten abgeschlossen. Weitere Informationen zur Lösung des 1px-Randproblems auf Mobilgeräten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!