taille de police adaptative HTML

Cet article présente principalement la taille de police adaptative HTML, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Dans le processus de développement, j'ai rencontré le besoin d'ajuster. l'interface dom La largeur et la hauteur de la page sont utilisées pour définir la taille de police adaptative. Nous allons maintenant partager les idées de développement

Lorsque la largeur et la hauteur de l'élément dom de la page sont limitées, il est impossible de la définir. la même taille de police pour tous les éléments, et la taille de la police est Si le paramètre est trop petit, cela ne favorise pas la beauté de l'interface, donc mon idée de développement est d'utiliser JS pour contrôler dynamiquement la taille de la police dans le dom, c'est-à-dire c'est-à-dire, obtenez la largeur et la hauteur du dom via JS, puis accumulez la taille de police à partir de 12px jusqu'à ce que la taille de la police puisse s'adapter au dom. Jusqu'à la largeur et la hauteur, la taille de police finale obtenue est la taille de police requise

.

Ici, je l'ai développé en utilisant Angularjs, je publierai donc les instructions écrites pour référence

***.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");
            }
        })
    };
}])

Ici, j'utilise Angularjs. Masquez l'élément DOM avant d'ajouter la taille de la police, puis définissez l'élément DOM sur être visible une fois que la taille de police requise a été obtenue. Lors des tests locaux, aucune anomalie telle que le scintillement de l'interface n'a été trouvée. Par exemple, lorsque l'interface doit traiter trop d'éléments ou doit actualiser les données régulièrement, vous devrez peut-être prendre en compte les performances. de la page

Il convient de noter que vous devez effectuer certains réglages pour le style de l'élément dom en CSS. Par exemple, vous devrez peut-être définir le contenu pour qu'il ne soit pas renvoyé à la ligne, le débordement de contenu, le dimensionnement de la boîte. , etc., en fonction de la situation réelle Définissez-le vous-même

Si vous devez définir plusieurs tailles de police adaptatives DOM, vous pouvez également utiliser cette idée pour gérer

Recommandations associées :

Explication détaillée des hyperliens HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!