창 크기를 조정할 때 텍스트의 자동 크기 조정 (글꼴 크기)?

Question

나는 창 크기를 바꿀 때 요소의 크기가 조정되는 페이지를 만들려고 노력하고있다. CSS 이미지에서 문제없이 작동하지만 텍스트에 대해 동일한 작업을 수행 할 수 없으며 CSS에서도 가능하지 않습니다. 그리고 이것을 수행하는 jquery 스크립트를 찾을 수없는 것 같습니다.

사용자가 창 크기를 조정할 때 사용자가 페이지 확대/축소를 호출 할 필요없이 페이지를 동적으로 유동적으로 조정해야합니다. 이것은 CSS를 통해 내 img div에서는 정상적으로 작동하지만 같은 크기를 유지하는 텍스트에는 적용되지 않습니다.

아이디어가 있으십니까?

Answer 1

나는 이것을 직접해야만했다. 내가 한 것은 신체의 기본 텍스트 크기를 설정하고 다른 모든 크기의 비율을 설정한다는 것입니다. 그런 다음 간단한 jQuery 스크립트를 사용하여 창 크기를 기본 크기로 변경했습니다. 다른 크기도 업데이트됩니다.

나는 이런 식으로 뭔가를 사용 :

$(function() { 
    $(window).bind('resize', function() 
    { 
     resizeMe(); 
     }).trigger('resize'); 
    }); 

을하고 resizeMe 기능에, 나는이 있었다 :

//Standard height, for which the body font size is correct 
var preferredHeight = 768; 
//Base font size for the page 
var fontsize = 18; 

var displayHeight = $(window).height(); 
var percentage = displayHeight/preferredHeight; 
var newFontSize = Math.floor(fontsize * percentage) - 1; 
$("body").css("font-size", newFontSize); 

Answer 2

당신은에 따라 다른 기본 글꼴 크기를 지정 CSS3 media queries하여이 작업을 수행 할 수

브라우저 크기. 좋은 이것은 body 태그를 예를 들어, 고정 된 기본 글꼴 크기를 사용해야합니다 CSS expressions

사용을 해킹 할 수있을 IE의 지원을 A List Apart

에 이것에 대한 기사와 비율이 있습니다 또는 다른 곳의 em 기반 크기.

Answer 3

FitText과 같은 jQuery 플러그인을 사용해보세요. 상위 요소의 너비에 맞게 텍스트의 크기가 자동으로 조정됩니다.

동일한 목표를 가진 또 다른 jQuery 플러그인은 BigText (demo)입니다.

Answer 4

리자인 대답은 완벽합니다! 그것이있는 곳 -1을 남겨주세요! 새끼 고양이를 제거했을 때 새끼 고양이가 죽어 가고있었습니다.

fontsize 변수 대신 페이지의 표준 글꼴 크기로 설정하면됩니다. 광산은 16

했다

Answer 5

내가 http://practicaltypography.com/end-credits.html#bio M. Butterick에서 트릭을 사용하고

:

<style type="text/css"> 
<!--adattamento font-size a browser width--> 
     @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}} 
<!--body-format--> 
      body { 
     max-width:1000px; 
     min-width:520px; 
     line-height:1.33em; 
     margin:1em; 
     background-color:#f7f7f7; 
     font-family:Source Sans Pro; 
     color:#361800; 
     } 
    </style> 

Answer 6

roryf이 올바른 궤도에!

미디어 쿼리가 답변 중 하나입니다.

트릭은 본문부터 시작하여 글꼴 크기를 %로 사용하는 것입니다. 이렇게하면 글꼴 크기가 상속되고 본문에서 글꼴 크기를 변경하면 어디서나 글꼴 크기가 변경됩니다. 뭔가를 시도

:

body { font-size: 100% } 
h1 {font-size: 200% } 

@media all and (max-width:600px) { 
    body {font-size: 70%} 
} 

웹 사이트 폭이 600 픽셀보다 작은 얻을

는 다음 글꼴 크기가 %가 사용되는 경우, 모든 곳에서 무슨의 70 %로 설정합니다 (또한이 예에서 H1.)

Answer 7

건물 Lizzan의 대답에, 여기에 비례 크기를 얻기 위해 폭과 높이 모두의 제곱근을 사용하여 버전입니다 :

// When document has finished loading 
$(document).ready(function() { 

    var resizeText = function() { 
     // Standard height, for which the body font size is correct 
     var preferredFontSize = 180; // % 
     var preferredSize = 1024 * 768; 

     var currentSize = $(window).width() * $(window).height(); 
     var scalePercentage = Math.sqrt(currentSize)/Math.sqrt(preferredSize); 
     var newFontSize = preferredFontSize * scalePercentage; 
     $("body").css("font-size", newFontSize + '%'); 
    }; 

    $(window).bind('resize', function() { 
     resizeText(); 
    }).trigger('resize'); 

}); 

데모 : 당신은 resizible 텍스트를 만들 수 있습니다 http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

Answer 8

더 간단한. 이 솔루션은 나를 위해 작동합니다. http://jsfiddle.net/VooDi/dka48dx8/

본문의 글꼴 크기는 현재 창 내부 너비와 동일합니다.

for jsfiddle 560 px;

body { 
    font-size: 560px; 
} 

JS :

onresize=onload=function() { 
    document.body.style.fontSize=window.innerWidth+"px" 
} 

필요한 요소 설정 폰트 크기

그게 모든

<h1 style="font-size:5%">Resize this text!!!!</h1> 

%있다. 희망이 사람을 도움이됩니다.