Lösung für Front-End-Browser-Schriftgrößen von weniger als 12 Pixel

Vorwort

Als ich kürzlich an einem Projekt arbeitete, war die Schriftgröße des UI-Designs 10px. Als ich mir die Renderings ansah, stellte ich fest, dass die Schriftgröße immer noch recht groß war. Als ich sie auf 12px änderte, blieb die Schriftgröße gleich. Als ich sie auf 14px änderte, wurde die Schriftgröße größer. Ich fand ein Muster und stellte fest, dass der Browser die Mindesteinstellung auf 12px einstellte, damit Benutzer die Schrift klar sehen konnten. was zu tun? Design ist 10px?

Das endgültige Effektdiagramm sieht wie folgt aus:

Rendern

Rendern

Rendern

Als ich Baidu durchsuchte, sagten die Experten, dass die Verwendung transform: scale(0.5) die Anforderung erfüllen könne. Als ich es jedoch verwendete, stellte ich fest, dass die Breite und Höhe des gesamten Div skaliert wurden, was die Anforderung nicht erfüllte.

Umgekehrt können Sie den roten Punkt und den Text auf zwei Divs setzen. Der rote Punkt steuert die Breite und Höhe, und die Schrift kann mithilfe von transform: scale je nach Bedarf verkleinert werden.

Der spezifische Implementierungscode lautet wie folgt:

<div v-if="WarenkorbNum>=1" class="WarenkorbDaten">
     <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div>
     <div class="Num" v-else-if="cartNum>99">99+</div>
</div>

CSS-Teil:

.cartData{
    Höhe: .75rem;
    Mindestbreite: 0,75rem;
    Randradius: .375rem;
    Hintergrund: rot;
    Farbe: weiß;
    Textausrichtung: zentriert;
    Zeilenhöhe: .75rem;
  }
  .Anzahl{
    Schriftgröße: 20px;
    -webkit-transform: Maßstab(0,5);
    }

Die Schriftgröße beträgt oben 14*0,8 = 11,2px und kann je nach Bedarf angepasst werden.

Diese Schreibweise allein ist nicht mit IE und FF kompatibel, daher hier eine andere kompatible Schreibweise:

.Anzahl{
    Schriftgröße: 14px;
    -webkit-transform: Maßstab(0,8);
 }
.Numsize-Schriftart{
  Schriftgröße: 14*0,8px;
}

Beachten:

transform:scale() kann nur Elemente skalieren, die Breite und Höhe definieren können, aber Inline-Elemente haben keine Breite und Höhe. Wir können einen display:inline-block; hinzufügen.

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.