저는 워드 프레스 테마를 채택하고 있으며 각 컨테이너 div의 너비에 따라 전체 페이지 크기의 텍스트를 갖는 것이 좋습니다.컨테이너 크기를 기준으로 글꼴 크기를 조정하십시오.
지금까지 모든 너비는 %로 표시되어 있지만 w3c에 언급 된 font-size 속성은 컨테이너 div의 크기가 아니라 상위의 글꼴 크기 만 고려합니다.
여러 개의 다른 답변 힌트로, 나는 가능한 모든 컨테이너를 모르기 때문에 javacript 및 대상 컨테이너 div, 내 관점에서 매우 도움이되는 대답은 내 문제에 적용되지 않지만 대상으로 할 수 ids 또는 클래스는 텍스트 등을 출력 할 수있는 향후 플러그인 설치를 고려해야하므로
이렇게하려면 다른 방법이 있습니까?
자바 스크립트가 아님. CSS는 행의 높이를 기준으로 font-size 퍼센트를 기반으로하며 폭 기반 컨트롤은 없습니다.
디자인을 변경하는 것이 좋습니다.
당신이 자바 스크립트에 얼마나 능숙한 지 잘 모르겠지만 DOM 노드를 반복하고 공통 조건을 찾고 DIV의 너비를 찾고 앞으로 나아갈 수 있습니다. 그런 식으로.
한 가지 가능한 해결책은 body 요소 만 대상으로하고 글꼴 크기를 변경하는 것입니다. 이렇게하면 모든 글꼴 크기가 부모 변경으로 인해 조정되어야합니다.
가장 일반적인 화면 크기를 타겟팅하기 위해이 솔루션을 미디어 쿼리와 결합하면 완벽해야합니다.
그 바탕으로, 나는 다음 ( http://jsfiddle.net/8TrTU/73/)function adaptFontSize() {
var defaultW = 100;
var defaultFontSize = 16;
var width = parseInt($("#header").width());
var fontSize = (defaultFontSize * width)/defaultW+"px";
$("#page").css('font-size', fontSize);
// alert(width +" "+ defaultFontSize * width+ " " fontSize);
}
$(document).ready(adaptFontSize);
$(window).resize(adaptFontSize);
의견을 함께 재현? 가능한 개선?