Einführung von SVG in CSS, um mit einigen Android-Instanzen kompatibel zu sein

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zum Beispiel der Einführung von SVG in CSS vor, um mit einigen Android-Geräten kompatibel zu sein, die 0,5-Pixel-Ränder anzeigen. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und weitergeben als Referenz. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Vorwort

Bei der Entwicklung der H5-Seite habe ich festgestellt, dass die nativen Browser einiger Android-Geräte nicht mit der 0,5-Pixel-Grenze kompatibel sind. Dies ist sehr beunruhigend Zeit, wie folgt Code gezeigt:

input {
  border-bottom: 0.5px solid #DCDCDC;
}

Rem verwenden, um zu verbessern

Später dachte ich darüber nach, rem zu verwenden, weil das Die H5-Seite entlehnt die reaktionsfähigen Pixel von Taobao und legt die Schriftgröße des Stammelements entsprechend der Auflösung des Mobilgeräts fest, sodass fast alle Pixel in REM als Einheit geändert werden, wodurch reaktionsfähige Pixel und Retina auf der mobilen Seite besser implementiert werden können -Bildschirmleistung. Der Code lautet wie folgt:

input {
  /* 47 是页面根元素的 font-size 大小 */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}

Im Test wurden einige Modelle einwandfrei angezeigt, einige jedoch immer noch nicht. Es gibt Beiträge im Internet, die Sie sehen können Verwenden Sie Pseudoelemente: Vorher und Nachher führt eine 1-Pixel-Leistung aus und verwendet dann transform: scaleY(0.5); Die Idee ist sehr gut, aber das Eingabeelement unterstützt keine Pseudoelemente.

Endlich habe ich einen tollen Weg gefunden: die Verwendung von SVG in CSS!

SVG zur Verbesserung in CSS einführen

Die konkrete Idee besteht darin, dem Element ein Hintergrundbild hinzuzufügen und dann SVG als Bildtyp festzulegen, da 1px Auf der SVG-Datei befindet sich die tatsächliche Datei. Sie belegt tatsächlich nur 1 physisches Pixel.

Die Implementierung ist sehr einfach, der Code lautet wie folgt:

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;><line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/></svg>") ;
}

Das Problem endet hier nicht, verwenden Sie PHP-Code, um die SVG-Datei zu konvertieren XML-Code in das Base64-Format und versuchen Sie es erneut. Versuchen Sie:

<?php
  echo base64_encode("<svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;><line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/></svg>");
?>

Die Ausgabe lautet wie folgt: ZWl naHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUniHkyPScxMDAl JyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==

Wieder eingeführt im Hintergrundbild von CSS: (Beachten Sie, dass das ursprüngliche utf8 in base64 geändert werden sollte)

Verwandte Empfehlungen:

input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
}

SVG und Vanilla JS Das Framework erstellt einen „sternförmigen bis herzförmigen“ Code-Sharing

So beginnen Sie mit der Implementierung eines farbenfrohen Ring-Countdowns mit SVG

Ein detailliertes Beispiel dafür, wie Webpack die SVG-Methode tatsächlich lädt

Das obige ist der detaillierte Inhalt vonEinführung von SVG in CSS, um mit einigen Android-Instanzen kompatibel zu sein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!