So lösen Sie das Problem verschwommener kleiner Symbole auf Mobilgeräten

Vorwort

Zuvor habe ich über das Problem der vertikalen Fehlausrichtung zwischen Bildern und Text gesprochen. Im angegebenen kleinen Beispiel wurde ein kleines Symbol verwendet. Ich habe ein Hintergrundbild verwendet, um dieses kleine Symbol anzuzeigen:

.del .icon{ Anzeige: Inline-Block; Breite: 20px; Höhe: 25px; Rand rechts: 5px; 
vertikale Ausrichtung: Mitte; Hintergrund: URL("imgs/delete.png") keine Wiederholung Mitte; Hintergrundgröße: 100 %;}

Die tatsächliche Größe des Symbols „delete.png“ beträgt 20 Pixel und wird auf dem PC normal angezeigt:

Aber als ich es auf mein Telefon legte, hieß es: ups! Warum ist das Symbol verschwommen? !

Ok, da das Bild nicht klar genug ist, verwenden Sie einfach ein größeres Symbol, verdoppeln Sie einfach die Größe und verwenden Sie 40 Pixel!

Was? Immer noch etwas verschwommen?

Dann mach es ein bisschen größer...Bist du müde? Gibt es keine bessere Lösung? Die Antwort ist natürlich ja!

Verwenden Sie zum Platzieren ein Vektorbild, das heißt, SVG ist hier zum Spielen!

Natürlich wird die spezifische Syntax von SVG in diesem Artikel nicht im Detail beschrieben. Hier erklären wir kurz, wie man im obigen Beispiel die PNG-Bitmap direkt in ein SVG-Vektorbild konvertiert:

1. Klicken Sie hier, um IcoMoon zu betreten und suchen Sie nach dem Schlüsselwort „Löschen“

2. Wählen Sie das Löschsymbol

3. Klicken Sie auf die Schaltfläche unten links, um zur neuen Seite zu wechseln

4. Klicken Sie nun auf den Text „Code abrufen“ unter dem Symbol. Daraufhin wird ein Dialogfeld angezeigt.

Dialogfeld

5. Nehmen Sie zuerst den Code der Symboldefinition(en) heraus und platzieren Sie ihn im vordersten Div im Textkörper. Legen Sie fest, dass das Div ausgeblendet werden soll. Nehmen Sie dann den HTML-Teil (SVG) heraus, um das ursprüngliche PNG-Symbol zu ersetzen. Nehmen Sie schließlich den CSS-Teil heraus (nehmen Sie je nach Bedarf leichte Änderungen vor, z. B. an der Größe) und platzieren Sie ihn im Stylesheet.

<!--HTML-Abschnitt-->
<Text>
    <div Stil="Anzeige: keine;">
        <!--Als SVG-Bibliothek, die bei Bedarf verwendet werden kann-->
        <svg>
            <symbol id="icon-bin" viewBox="0 0 32 32">
                <title>Behälter</title>
                <Pfad d="M4 10v20c0 1,1 0,9 2 2 2h18c1,1 0 2-0,9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></Pfad>
                <Pfad d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></Pfad>
            </symbol>
        </svg>
    </div>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-bin"></use></svg><!--Hier bei Bedarf entsprechend der Icon-ID aufrufen--><span>Löschen</span></div>
</body>

/*CSS-Teil*/
.del{ Schriftgröße: 20px;}
.del .icon{ Anzeige: Inline-Block; Breite: 20px; Höhe: 25px; rechter Rand: 5px; vertikale Ausrichtung: Mitte; Füllung: aktuelle Farbe;}
.del span{ vertikale Ausrichtung: Mitte;}

Ich werde den CSS-Teil oben nicht erläutern, hier werde ich kurz auf den HTML-Teil eingehen.

Der oben versteckte Teil von SVG kann als SVG-Bibliothek betrachtet werden. Sie können alle SVG-Symbole, die Sie auf der Seite benötigen, darin einfügen. Jedes Symbol stellt ein SVG-Symbol dar und wird dann entsprechend der ID über xlink:href aufgerufen, wo Sie das Symbol verwenden müssen. Der Fachbegriff lautet SVG-Sprites, was sich viel praktischer anfühlt als CSS-Sprites. Das Wichtigste ist, dass es sich um ein Vektorbild handelt, das unabhängig davon, wie Sie hinein- oder herauszoomen, nicht verzerrt wird.

Lassen Sie mich Ihnen ein Beispiel geben~~

Was muss ich tun, wenn ich das obige Symbol in ein „×“ ändern muss, das vorherige Symbol aber als Backup behalten möchte?

Das geht ganz einfach. Fügen Sie einfach den SVG-Code von „×“ zur „SVG-Bibliothek“ hinzu, und zwar so:

<div Stil="Anzeige: keine;">
    <!--Als SVG-Bibliothek, die bei Bedarf verwendet werden kann-->
    <svg>
        <symbol id="icon-bin" viewBox="0 0 32 32">
            <title>Behälter</title>
            <Pfad d="M4 10v20c0 1,1 0,9 2 2 2h18c1,1 0 2-0,9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></Pfad>
            <Pfad d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></Pfad>
        </symbol>
        <!--Neues Symbol hinzufügen-->
        <symbol id="Symbol-Kreuz" viewBox="0 0 32 32">
            <title>Kreuz</title>
            <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
        </symbol>
    </svg>
</div>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-cross"><!--Beachten Sie, dass sich der ID-Name hier geändert hat--></use></svg><span>Löschen</span></div>

Dann steht es so: Der Austausch war erfolgreich!

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. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

<<: Analyse des HTML-Schreibstils und Gründe erfahrener Leute

>>: Einführung in die Verwendung von MySQL-Quellbefehlen

Verwenden Sie Docker, um mehrere PHP-Versionen auf dem Server auszuführen

So lösen Sie das Problem verschwommener kleiner Symbole auf Mobilgeräten

Verwenden Sie Docker, um mehrere PHP-Versionen auf dem Server auszuführen

htm-Anfängerhinweise (unbedingt für Anfänger lesen)

Detaillierte Erläuterung der Befehle zum Lesen und Schreiben von Remotedateien mit Vim im Linux-System

Detaillierte Erklärung zum Erstellen geplanter MySql-Aufgaben in Navicat

Einführung in semantische XHTML-Tags

Quickjs kapselt JavaScript-Sandbox-Details

Reines CSS zum Erstellen der Wassertropfen-Animationsschaltfläche im Material Design

Zusammenfassung ungewöhnlicher Operatoren und Operatoren in js

Zabbix konfiguriert DingTalks Alarmfunktion mit Bildern

So installieren und konfigurieren Sie GitLab unter Ubuntu 20.04

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18

MySQL 5.6.24 (binär) automatisches Installationsskript unter Linux

Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf

Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen

Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x

Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

Schritte zum Erstellen Ihres eigenen YUM-Repositorys

Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung

Die Vor- und Nachteile von Nginx und LVS und ihre geeignete Nutzungsumgebung

Wissen Sie, wie Sie das Flash-Wmode-Attribut in Webseiten verwenden?

Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

Grundlegende Verwendung von @Font-face und wie man es mit allen Browsern kompatibel macht

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

Häufig verwendete HTML-Format-Tags_Powernode Java Academy