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

js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)

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

js zur Implementierung einer Überprüfungscode-Interferenz (dynamisch)

Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit

JavaScript ist unzuverlässig undefiniert

Beschreibung des Meta-Viewport-Attributs in der HTML-Webseite

Detaillierte Erklärung der Tomcat-Verzeichnisstruktur

Codebeispiel für die Verwendung der MySql COALESCE-Funktion

Beispiel für eine Nginx-Cache-Konfiguration

HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte

18 allgemeine Befehle in der MySQL-Befehlszeile

Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0

Artikel empfehlen

Windows kann den MySQL-Dienst nicht starten und meldet Fehler 1067 – Lösung

Einfache Zusammenfassung der Methoden zur Leistungsoptimierung von Tomcat

MySQL-Abfrage – Erlernen grundlegender Abfrageoperationen

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

Installieren Sie Jenkins mit Docker und lösen Sie das Problem des anfänglichen Plugin-Installationsfehlers

HTML-Tabellen-Tag-Tutorial (19): Zeilen-Tag

Was ist das Basis-Tag und was macht es?

Spezifische Verwendung des Linux-gcc-Befehls

Beste Tools zum Erstellen und Bearbeiten von Screenshots unter Linux

HTML-Grundstruktur_Powernode Java Academy

Probleme bei der Installation von TensorRT im Docker-Container

Verwendung des if-Urteils in HTML

Beispielcode zur Implementierung der Formularvalidierung mit reinem CSS

Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Detaillierte Erläuterung des Beispiels einer MySQL-Einzeltabellenabfrage