Das ist ein altes Problem, als ich es zum ersten Mal bemerkte. Nun, ich hatte gerade den Front-End-Arbeitsplatz betreten und nichts verstanden :
Der Designer kam mit seinem Handy vorbei: Diese Ränder sind dick, mein Designentwurf ist 1px
ICH:? ? ? ? Was ich geschrieben habe, ist 1px. Wenn Sie es nicht glauben, werfen Sie einen Blick darauf. (Während er sprach, holte er den CSS-Code heraus
Designer: Das stimmt nicht. Der Rand ist viel dicker als der auf meinem Design. Er sieht seltsam aus (ähm, er ist wirklich pixelig).
Ich: Dann werde ich es auf 0,5 Pixel ändern und Sie können einen Blick darauf werfen (ich habe den Code während des Gesprächs geändert).
Der Designer schaute es sich an und nickte, es sei tatsächlich viel besser.
Später stellte sich heraus, dass derselbe Code auf einigen Android-Geräten problematisch war und dazu führte, dass die 0,5-Pixel-Zeile unsichtbar war.
Es ist seltsam. Offensichtlich wird das Problem nicht gelöst, aber der 1-Pixel-Rand sieht viel dicker aus als im Designentwurf.
Leistung des 1-Pixel-RandsIch verwende CSS direkt, um den 1-Pixel-Rahmen festzulegen.
html:
<ul class=hairlines> <li>1</li> <li>2</li></ul>
CSS:
* { margin: 0; padding: 0; ul, li{ width: 300px; } .hairlines li{ position: relative; -bottom: 1px solid #cccccc; // Den Rand auf 1px setzen }Der erhaltene Screenshot sieht wie folgt aus:
Es sieht viel dicker aus als der Designentwurf. Sie können es vergleichen:
Lösung 1: Pseudoklasse + TransformationMit der Mentalität, das Problem zu lösen, habe ich zu diesem Zeitpunkt zwar nicht klar über den Grund nachgedacht, aber dennoch einige der genannten Methoden mithilfe von Border-Image oder Box-Shadow gefunden, die auch den gewünschten Effekt simulieren können. 1px-Randeffekt, aber ich persönlich denke, dass es nicht universell und keine konventionelle Lösung ist.
Die endgültige Wahl bestand darin, die Pseudoklasse + Transformationsmethode zu verwenden: Das Prinzip besteht darin, den Rand des ursprünglichen Elements zu entfernen, dann :before oder :after zu verwenden, um den Rand zu wiederholen und den Maßstab der Transformation um die Hälfte zu reduzieren Das Element wird relativ positioniert und der neue Rand wird absolut positioniert.
html wie oben
Das CSS lautet wie folgt:
* { margin: 0; padding: 0; ul, li{ width: 300px; } .hairlines li{ position: relative; : 10px; .hairlines li:after{ Inhalt: ''; unten: 0; #cccccc; width: 100%; -webkit-transform: scaleY(0.5); -webkit-transform-origin: 0 0;In diesem Fall sind die gezeichneten Linien tatsächlich viel dünner. Ich habe im Allgemeinen ein Jahr lang die obige Methode verwendet, um das 1-Pixel-Randproblem zu lösen, aber nachdem ich sie verwendet habe, habe ich mehrere Probleme entdeckt:
1.Warum ist ScaleY(0,5)? Wie hast du diese 0,5 bekommen? Müssen alle Modelle auf die Hälfte verkleinert werden, sind sie also universell?
2. Was passiert, wenn ich die vier Ränder eines Containers gleichzeitig zeichnen möchte?
3. Unterstützt es Ränder mit abgerundeten Ecken?
Die Lösung für die beiden letztgenannten Probleme kann durch Modifizieren des obigen Codes gefunden werden (um die Anzeige des Effekts zu erleichtern, habe ich den durch normales Schreiben erzielten Effekt und den durch die Verwendung von Pseudoklassen erzielten Effekt zusammengefügt, damit es einfacher ist um den Unterschied zu sehen):
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=initial-scale=1, Maximum-scale=1, Minimum-scale=1, vom Benutzer skalierbar =no, width=device-width> <title>1px-Randproblem auf mobilem Endgerät</title> <style> * { margin: 0; padding: 0; none; .lines { width: 200px; margin: 0 auto; .lines li { height: 50px; border-radius: 13px; -top: 10px; } .hairlines { width: 200px; 3px; .hairlines li{ height: 50px; border:none; : absolut; links: 0; Rand: 1px fest #cccccc; 200 %; height: 200 %; -webkit-transform: scale(0.5); -webkit-transform-origin: left top; ><body>Dicke Linien<ul class=lines> <li>1</li> <li>2</li></ul>Dünne Linien<ul class=hairlines> <li>3</li> <li>4</li></ul></body></html>Das resultierende Rendering sieht wie folgt aus:
Der Rand unten ist offensichtlich viel dünner und näher am Designentwurf.
Also 1. Warum ist ScaleY(0,5)? Wie hast du diese 0,5 bekommen? Müssen alle Modelle auf die Hälfte verkleinert werden, sind sie also universell? Wie soll diese Frage beantwortet werden?
Das bringt uns zurück zum Kern des Problems. Warum sieht es immer noch viel dicker aus als sonst, obwohl ich 1px im CSS geschrieben habe?
Nach Überprüfung der Informationen stellt sich heraus, dass die im CSS eingestellten Pixel nicht eins zu eins mit den Pixeln des Geräts übereinstimmen. Das bedeutet, dass das, was ich auf dem Mobiltelefon sehe, möglicherweise nicht eins zu eins ist sei ein Pixel. Die Breite, die der Punkt einnimmt.
Das Pixel von CSS ist ein abstraktes und relatives Konzept. Die dargestellten physischen Pixel sind auf älteren Geräten relativ gering. Auf diese Weise ist ein Pixel tatsächlich ein physisches Pixel, aber die Technologie entwickelt sich rasant weiter. Wenn sich die Größe nicht ändert, wird ein Bildschirm mit mehr Pixeln gefüllt (normalerweise als logische Pixel bezeichnet). mehrere physische Pixel.
Wie viele physische Pixel entspricht also eine CSS-Pixelbreite?
Dies erfordert die Angabe von devicePixelRatio (Gerätepixelverhältnis).
devicePixelRatio = physisches Pixel/unabhängiges Pixel auf dem Gerät, das über window.devicePixelRatio erhalten werden kann. Dieses Pixelverhältnis kann genau beschreiben, wie viele physische Pixel der Pixelbreite eines CSS entsprechen, was tatsächlich den Pixeln von devicePixelRatio entspricht.
Wenn das Anfangsmaßstabsattribut des Ansichtsfensters 1 ist, ist die Seitengröße normal, aber wenn der Anfangsmaßstab 0,5 ist, wird die Seite um das 1-fache verkleinert. Ein Gerät mit devicePixelRatio von 2 hat ursprünglich 1 CSS-Pixelbreite, die 2 ausmacht Physische Pixelbreiten: Nach der Reduzierung belegt die Breite von 1 CSS-Pixel nur 1 physisches Pixel, d. h. es wird ein echtes 1 physisches Pixel erreicht.
Lösung 2: rem + AnsichtsfensterAn diesem Punkt ist die Lösung sehr klar: Wir können das devicePixelRatio des Geräts zur Laufzeit abrufen und die anfängliche Skalierung des Ansichtsfensters dynamisch auf 1/devicePixelRatio ändern, um sicherzustellen, dass die Breite von 1 Pixel dem tatsächlichen 1 physischen Pixel entspricht Breite. Verwenden Sie rem für andere Anpassungen (denn wenn Sie px verwenden, wird es reduziert)
Der Code lautet wie folgt:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=initial-scale=1, Maximum-scale=1, Minimum-scale=1 , user-scalable=no, width=device-width>--> <title>1px-Randproblem auf mobilem Endgerät</title> <script> (function () { var clientWidth = window.screen.width; var dpr = window.devicePixelRatio; var vp = document.createElement('meta'); document.documentElement.style.fontSize = clientWidth > 414 : 20 * dpr * clientWidth / 360 + ' px'; vp.name = 'viewport'; vp.content = `initial-scale=${1.0 * 1 / dpr}, Maximum-scale=${1.0 * 1 / dpr}, Minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device- width`; var m = document.getElementsByTagName('meta')[0]; })(); </script> * { margin: 0; padding: 0; li{ list-style: none } .lines margin: 0 auto; { border: 1px solid #cccccc; height: 2.5rem; text-align: center; 0,6rem; margin-top: 0,5rem; } </style></head><ul class=lines> <li>1</li> <li>2</li></ul></ Körper></html>Der erzielte Effekt ist im Bild unten zu sehen (er ist deutlicher, wenn man ihn auf einem Mobiltelefon betrachtet):
Aus der obigen Sicht, zurück zu den vorherigen Fragen: 1. Warum ist ScaleY (0,5)? Wie hast du diese 0,5 bekommen? Müssen alle Modelle auf die Hälfte verkleinert werden, sind sie also universell? Tatsächlich ist es nicht unbedingt 0,5. Bei einem Gerät mit einem dpr von 3 sollte es tatsächlich 0,3333 sein ... Es ist nicht universell, da der dpr jedes Mobiltelefons unterschiedlich sein kann. Der Wert von 0,5 in Methode 1 ist jedoch im Allgemeinen Mindestens dünner als 1 Pixel, also auch Es kann fast die Anforderungen des Designers erfüllen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.