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

Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7

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

Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7

So erhalten und verwenden Sie die Zeit im Linux-System

Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7

Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites

Schritte und Fallstricke beim Upgrade von Linux MySQL 5.5 auf MySQL 5.7

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3

Detaillierte Erklärung des Unterschieds zwischen adaptiver und responsiver Analyse in der Umgangssprache

Die Neugestaltung einer Website ist für jede Familie eine schwierige Aufgabe

Beispiele für den Import und Export von MySQL-Tabellendaten

Artikel empfehlen

Lernen Sie MySQL Index Pushdown in fünf Minuten

MySQL-Abfragedaten aus einer Tabelle und Einfügen in eine andere Tabellenimplementierungsmethode

JavaScript-Interview: So implementieren Sie die Methode zur Array-Abflachung

So verwendet MySQL Transaktionen

Implementierung langer Textschatten in Less in CSS3

Sind die Wertebereiche von int(3) und int(10) in MySQL gleich?

Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern

Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode

9 praktische Tipps zum Erstellen von Webinhaltsseiten

So ändern Sie den Hostnamen in Linux dauerhaft

Django-Online-Bereitstellungsmethode von Apache

Vue implementiert Baumtabelle durch Elementbaumsteuerung

Detailliertes Tutorial zur Installation von MySQL unter Linux

Einführung in die Verwendung und den Unterschied zwischen „in“ und „exists“ in MySQL

impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen