Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

Gründe, warum die 1px-Linie dicker wird

Wenn wir an Mobilprojekten arbeiten, legen wir die Größe und den Stil von Elementknoten häufig gemäß den Entwurfszeichnungen fest. Manchmal ist der Stil, der gemäß den Entwurfszeichnungen geschrieben wurde, jedoch immer noch nicht zufriedenstellend. Obwohl es oberflächlich genauso aussieht wie der Entwurf, vermittelt es einfach nicht das Gefühl eines Entwurfs und es gibt ein unerklärliches Gefühl von Nachahmung. Wenn wir die Benutzeroberfläche überprüfen, haben wir häufig das Gefühl, dass die Trennlinie oder die Randlinie zu dick ist und dünner sein sollte. Aber wenn wir uns den Code ansehen, ist er bereits 1 Pixel groß. Warum sieht er trotzdem so dick aus?

Um die Ursache des Problems zu verstehen, müssen wir zunächst einige Konzepte verstehen:

(1) Physische Pixel

Ein physikalisches Pixel ist die kleinste physikalische Anzeigeeinheit (Pixelpartikel) auf einem Display (Handybildschirm). Unter der Planung des Betriebssystems hat jedes Gerätepixel seinen eigenen Farbwert und Helligkeitswert. Beispielsweise gibt es auf dem iPhone 6 750 x 1334 physische Pixelpartikel.

(2)Dichteunabhängiges Pixel

Geräteunabhängige Pixel (auch dichteunabhängige Pixel genannt) können als Punkte im Computerkoordinatensystem betrachtet werden. Dieser Punkt stellt ein virtuelles Pixel dar, das vom Programm verwendet werden kann (z. B. CSS-Pixel). Manchmal wird es auch als logisches Pixel bezeichnet. Anschließend werden diese vom entsprechenden System in physikalische Pixel umgewandelt. Daher besteht eine gewisse Entsprechung zwischen physischen Pixeln und geräteunabhängigen Pixeln. Dies ist das Gerätepixelverhältnis, über das wir als Nächstes sprechen werden.

(3) Gerätepixelverhältnis (DPR)

Die Device Pixel Ratio (kurz DPR) definiert die Entsprechung zwischen physischen Pixeln und geräteunabhängigen Pixeln. Sein Wert kann nach der folgenden Formel ermittelt werden:

Gerätepixelverhältnis (dpr) = physisches Pixel / logisches Pixel (px) // In einer bestimmten Richtung, x-Richtung oder y-Richtung, die folgende Abbildung dpr = 2

Wenn wir das Pixelverhältnis des Geräts kennen, wissen wir ungefähr, warum die 1-Pixel-Linie dicker wird. Vereinfacht ausgedrückt wird die Auflösung von Handy-Bildschirmen immer höher. Ein Handy gleicher Größe verfügt über mehr tatsächliche physikalische Pixel. Da verschiedene Mobilgeräte eine unterschiedliche Pixeldichte haben, entspricht der 1 Pixel, den wir auf verschiedenen Mobilgeräten schreiben, 1 Pixel dieses Mobilgeräts. Bei der Entwicklung mobiler Endgeräte müssen Sie heute normalerweise einen Satz hinzufügen:

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=nein">

Dieser Satz definiert die Breite des Ansichtsfensters dieser Seite als Gerätebreite, der anfängliche Zoomwert und der maximale Zoomwert sind beide 1 und das Zoomen durch den Benutzer ist verboten.

Die Ansichtsfenstereinstellungen und die physische Bildschirmauflösung sind proportional, aber nicht identisch. Das mobile Fensterobjekt verfügt über eine Eigenschaft devicePixelRatio, die das Verhältnis der physischen Gerätepixel zu den CSS-Pixeln darstellt. Auf Retina-iPhones beträgt dieser Wert 2 oder 3. Die in CSS angegebene Länge von 1 Pixel wird auf physische Pixel von 2 Pixel oder 3 Pixel abgebildet. Durch Festlegen des Ansichtsfensters können Sie ändern, wie viele physische Pixel zum Rendern von 1 Pixel in CSS verwendet werden. Wenn Sie unterschiedliche Ansichtsfenster festlegen, wird die Dicke der 1-Pixel-Linien natürlich unterschiedlich sein.

Lösung zur 1px Linienverdickung

Pseudoklasse + Skala

Das Prinzip dieser Methode besteht darin, den Rand des ursprünglichen Elements zu entfernen und dann :before oder :after zu verwenden, um den Rand wiederherzustellen. Das ursprüngliche Element ist relativ positioniert und der neue Rand ist absolut. Der Maßstab der Transformation wird verwendet, um die Zeilenhöhe um die Hälfte zu reduzieren, und der neue Rand entspricht 0,5 Pixel. Der Code lautet wie folgt:

.Skala{

  Position: relativ;

  Rand: keiner;

}

.scale:nach{

  Inhalt: '';

  Position: absolut;

  unten: 0;

  Hintergrund: #000;

  Breite: 100 %;

  Höhe: 1px;

  -webkit-transform: MaßstabY(0,5);

  transformieren: scaleY(0,5);

  -webkit-transform-origin: 0 0;

  Transform-Ursprung: 0 0;

}

Verwenden von flexible.js

Wie bereits erwähnt, ist der Grund, warum 1px dicker wird, dass die Breite des Ansichtsfensters einheitlich festgelegt ist. Wenn die Breite des Ansichtsfensters auf die tatsächliche physische Breite des Geräts festgelegt werden kann, entspricht 1px im CSS der tatsächlichen Länge von 1px. Das Prinzip von flexible.js ist folgendes: Holen Sie sich zuerst das Gerätepixelverhältnis devicePixelRatio und stellen Sie dann den Ansichtsfensterwert dynamisch entsprechend dem Skalierungsverhältnis ein. Das Ergebnis ist, dass 1px unabhängig vom Gerät immer 1 Gerätepixel darstellt, also das Mindestpixel des Geräts.

//Wenn devicePixelRatio=2, sind die Ausgabemetadaten wie folgt <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//Wenn devicePixelRatio=3 ist, sind die Ausgabemetadaten wie folgt <meta name="viewport" content="initial-scale=0.333333333333333333, maximum-scale=0.33333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

Meta-Viewport-Steuerung verwenden

Das Prinzip ist wie oben. Der Code lautet wie folgt:

//1px Pixelzeile <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0,5 Pixel Linie <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

Verwenden Sie Box-Shadow, um Grenzen zu simulieren

Verwenden Sie CSS, um Schatten zu verarbeiten und einen 0,5-Pixel-Effekt zu erzielen. Der Code lautet wie folgt:

.box-shadow-1px {

  Box-Schatten: Einschub 0px -1px 1px -1px #c8c7cc;

}

Verwenden von Rahmenbildern

Zuerst müssen Sie eine 0,5 Pixel breite Linie als Linienhintergrundbild erstellen. . Der Code lautet wie folgt:

P{

    Rahmenbreite: 0 0 1px 0;

    Rahmenbild: Bild-URL 2 0 rund;

}

Verwenden des Hintergrundverlaufs „linear-gradient“

Verwenden Sie einen linearen Farbverlauf, um das Hintergrundbild von farbig nach transparent zu gestalten. Die Standardrichtung ist von oben nach unten. Die Farbe von 0 Grad bis 50 % ist die Rahmenfarbe und die untere Hälfte ist transparent. Stellen Sie dann die Hintergrundbreite auf 100 % und die Höhe auf 1 Pixel ein und entfernen Sie die Wiederholung, sodass der farbige Rand 0,5 Pixel beträgt. Der Code lautet wie folgt:

.bg_border {

    Hintergrundbild: linearer Farbverlauf (0 Grad, 50 % Schwarz, 50 % transparent);

    Hintergrundgröße: 100 % 1px;

    Hintergrundwiederholung: keine Wiederholung;

}

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.