這篇文章主要介紹了關於html自適應字號，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
在開發過程中有遇到需要根據介面dom的寬高來設定自適應字號大小，現將開發思路分享
在頁面dom元素的寬和高都有限制的情況下，無法為所有的元素設定同樣的字號大小，而將字號設定太小又不利於介面美觀，所以我發展的想法是透過JS來動態控制dom中的字號大小，也就是透過JS取得dom的寬度和高度，再將字號從12px開始累加，直到字號可以適應dom的寬高為止，最後得到的字號即為需要的字號
這裡我是使用angularjs開發的，故將編寫的指令貼出來以供參考
***.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");
}
})
};
}])這裡我是在字號累加之前將dom元素隱藏，在已經取得需要的字號以後再將dom元素設定可見，在本地測試時未發現有介面閃爍等異常，如介面需要處理的元素過多或需要作定時刷新資料時，可能需要考慮頁面的效能問題
需要注意的是，在css中需要對dom元素的樣式做一些設置，如可能需要設置內容不換行、內容溢出、box-sizing等，根據實際情況自行設置
如果需要設定多個dom自適應字號時，也可以使用這個想法處理
相關推薦：
以上是html自適應字號的詳細內容。更多資訊請關注PHP中文網其他相關文章！
