在開發過程中有遇到需要根據界面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 超級鏈接詳細講解

以上就是html自適應字號的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。