Adaptive HTML-Schriftgröße

In diesem Artikel wird hauptsächlich die adaptive HTML-Schriftgröße vorgestellt, die jetzt einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen.

Im Entwicklungsprozess bin ich auf die Notwendigkeit gestoßen, sie anzupassen die Schnittstelle dom Die Breite und Höhe der Seite werden zum Festlegen der adaptiven Schriftgröße verwendet. Jetzt werden wir die Entwicklungsideen teilen

Wenn die Breite und Höhe des Seiten-DOM-Elements begrenzt ist, ist es nicht möglich, sie festzulegen Alle Elemente haben die gleiche Schriftgröße und die Schriftgröße ist Wenn die Einstellung zu klein ist, ist dies nicht förderlich für die Schönheit der Benutzeroberfläche. Daher besteht meine Entwicklungsidee darin, die Schriftgröße im Dom dynamisch über JS zu steuern Ermitteln Sie die Breite und Höhe des Doms über JS und akkumulieren Sie dann die Schriftgröße von 12 Pixel, bis sich die Schriftgröße an den Dom anpassen kann. Bis zur Breite und Höhe ist die endgültige Schriftgröße die erforderliche Schriftgröße

Hier habe ich es mit AngularJS entwickelt, daher werde ich die schriftlichen Anweisungen als Referenz veröffentlichen

***.directive("doCalculateFontsize",['$timeout',function ($timeout) {
    /*
    *   通用的字体大小自适应，通过在改变字体大小的同时计算dom元素的宽高是否超界实现
    * */
    return function(scope, element, attr) {
        attr.$observe("doCalculateFontsize",function (interpolatedValue) {
            if(interpolatedValue!=undefined&&interpolatedValue!="") {
                var maxwidth = parseInt(attr.domMaxWidth);
                var maxheight = parseInt(attr.domMaxHeight);
                var th = parseInt(attr.domTotalHeight);
                var text = attr.doCalculateFontsize;
                var nowsize = 12;
                var maxsize = 200;
                angular.element(element).css("visibility", "hidden").html(text).css("font-size", nowsize + "px");

                for (; nowsize < maxsize; nowsize++) {
                    var nowwidth = angular.element(element)[0].offsetWidth;
                    var nowheight = angular.element(element)[0].offsetHeight;

                    if (nowwidth >= maxwidth || nowheight >= maxheight) {
                        break;
                    }
                    else {
                        angular.element(element).css("font-size", nowsize + "px").css("marginTop", (th - 0.5 * nowheight) + "px").css("visibility", "visible");
                    }
                }
            }
            else{
                angular.element(element).css("visibility", "visible").html("").css("font-size", "12px");
            }
        })
    };
}])

Hier addiere ich die Schriftgrößen. Verstecke das DOM-Element vorher und mache das DOM-Element dann sichtbar, nachdem ich die erforderlichen Informationen erhalten habe Schriftgröße. Beim lokalen Testen wurden keine Auffälligkeiten wie z. B. ein Flimmern der Benutzeroberfläche festgestellt. Wenn die Benutzeroberfläche zu viele Elemente verarbeiten oder Daten regelmäßig aktualisieren muss, kann dies an den Leistungsproblemen der Seite liegen Es ist zu beachten, dass einige Einstellungen für den Stil des DOM-Elements in CSS vorgenommen werden müssen. Beispielsweise müssen Sie den Inhalt möglicherweise auf „Nicht umbrechen“, „Inhaltsüberlauf“, „Boxgröße“ usw. einstellen und ihn entsprechend festlegen zur tatsächlichen Situation.

Wenn Sie mehrere adaptive DOM-Schriftgrößen festlegen müssen, können Sie diese Idee auch verwenden, um damit umzugehen

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonAdaptive HTML-Schriftgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!