이 기사에서는 특정 참조 값이 있는 HTML 적응형 글꼴 크기를 주로 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.
개발 과정에서 사용자 정의 글꼴 크기를 설정해야 할 필요성이 발생했습니다. 인터페이스 돔의 너비와 높이를 글꼴 크기에 맞추기 위해 이제 개발 아이디어를 공유하겠습니다
페이지 돔 요소의 너비와 높이가 제한되면 모든 요소에 동일한 글꼴 크기를 설정할 수 없습니다. , 그리고 글꼴 크기를 너무 작게 설정하는 것은 인터페이스의 미에 도움이 되지 않기 때문에 제가 개발한 아이디어는 JS를 통해 DOM의 글꼴 크기를 동적으로 제어하는 것, 즉 JS를 통해 돔의 너비와 높이를 구하는 것입니다. 그런 다음 글꼴 크기가 dom의 너비와 높이에 적응할 수 있을 때까지 글꼴 크기를 12px로 누적합니다.
***.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"); } }) }; }])
HTML 하이퍼링크 자세히 설명
위 내용은 HTML 적응형 글꼴 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!